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>