扫码关注官方订阅号
刚开始学习vue 然后看文档 对于下面的这段话以及红圈中各个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 创建了一个组件
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信息' } })
以上是最近学习的自己的理解,希望可以帮助到你。
可以将组件作用域看做对象todoItem,调用组件的作用域看做parenttodoItem={todo:''},parent={todo:'传递数据'}v-bind:todo="todo"可以看做todoItem.todo = parent.todo,将值赋给组件。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
最近也正在学习,希望能可以用我的理解给你描述清楚。
选择id为demo的p作为vue的实例化区域,内部有todo-item组件,props是接收父类传入的参数,传入的是msg。于是需要在组件上绑定somemsg。v-bind可以省略,于是就可以写成:somemsg。
先来看
Vue.component创建了一个组件有了上面的理解,就可以继续把v-for结合起来理解了。v-for相当于就是一个for…of…遍历,遍历组件多次,每次绑定一个遍历出的todo给sometodo,sometodo就可以在子组件内部的props接收使用了。
以上是最近学习的自己的理解,希望可以帮助到你。
可以将组件作用域看做对象todoItem,调用组件的作用域看做parent
todoItem={todo:''},parent={todo:'传递数据'}
v-bind:todo="todo"可以看做todoItem.todo = parent.todo,将值赋给组件。