vue - 组件传值
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>
以上是 vue - 组件传值 的全部内容， 来源链接： utcz.com/z/375699.html
