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>