刚开始学习vue 然后看文档 对于下面的这段话以及红圈中各个todo对应的关系并不是很能理解 希望有人能详尽指点下 万分感谢
可以将组件作用域看做对象todoItem,调用组件的作用域看做parent
todoItem={todo:''},parent={todo:'传递数据'}
v-bind:todo="todo"可以看做todoItem.todo = parent.todo,将值赋给组件。
最近也正在学习,希望能可以用我的理解给你描述清楚。
选择id为demo的p作为vue的实例化区域,内部有todo-item组件,props是接收父类传入的参数,传入的是msg。于是需要在组件上绑定somemsg。v-bind可以省略,于是就可以写成:somemsg。
<p id="demo">
<todo-item :somemsg="msg"></todo-item>
</p>
先来看 Vue.component
创建了一个组件
// 创建一个todo-item组件
Vue.component('todo-item' ,{
props: ['somemsg'],
template: '<p> {{somemsg}} </p>'
})
// 实例化Vue
new Vue({
el: '#demo',
data: {
todos: [{
text: '内容一'
}, {
text: '内容二'
}],
msg: 'message信息'
}
})
有了上面的理解,就可以继续把v-for结合起来理解了。v-for相当于就是一个for…of…遍历,遍历组件多次,每次绑定一个遍历出的todo给sometodo,sometodo就可以在子组件内部的props接收使用了。
<p id="demo"> <todo-item :somemsg="msg"></todo-item> <todo-item v-for="todo in todos" :sometodo="todo"></todo-item> </p>
// 创建一个todo-item组件 Vue.component('todo-item' ,{ props: ['somemsg', 'sometodo'], template: '<p> {{ somemsg || sometodo.text }} </p>' }) // 实例化Vue new Vue({ el: '#demo', data: { todos: [{ text: '内容一' }, { text: '内容二' }], msg: 'message信息' } })
以上是最近学习的自己的理解,希望可以帮助到你。