vue

 1,父组件 App.vue  传值:   
 
<template>
  <div id="app">
    <Todos :todos="todos"/>   <!-- 父组件传递到子组件 -->
  </div>
</template>

<script>
import Todos from './components/Todos'
export default {
  name:'app',
  data(){
    return{
      name:"123",
      todos:[
        {id:1,title:"代办事件1",completed:false},
        {id:2,title:"代办事件2",completed:false},
        {id:3,title:"代办事件3",completed:false},
      ]
    }
  },
  components:{
    Todos:Todos
  }
}
</script>
 
2,子组件Todos.vue   接收
 
(1)第一种接收方式
 
<template>
  <div>
    <div v-for="todo in todos" :key="todo.id">
        {{todo}}
    </div>
  </div>
</template>

<script>
export default {
    name:'todos',
    props:["todos"]   //接收 父组件送来的 todos , 绑定到v-for
}
</script>
 
(2)第二种接收方式
<template>
  <div>
    <div v-for="todo in todos" :key="todo.id">
        {{todo}}
    </div>
  </div>
</template>

<script>
export default {
       name:'todos',
       props:{
        todos:{
            type:Array
      // default :  。。。
        }
      }
}

</script>
原文地址:https://www.cnblogs.com/500m/p/11767983.html