1,父组件 App.vue  传值:   
 
<template>
  <div >
    <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>

相关文章:

  • 2022-02-26
  • 2021-08-03
  • 2022-02-11
  • 2022-01-04
  • 2022-03-08
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-09-21
  • 2021-04-02
  • 2021-06-21
  • 2022-12-23
相关资源
相似解决方案