javascript - 新手上路,关于vue文档中不理解的内容

问题描述

问 题

刚开始学习vue 然后看文档 对于下面的这段话以及红圈中各个todo对应的关系并不是很能理解 希望有人能详尽指点下 万分感谢

解决方案

最近也正在学习，希望能可以用我的理解给你描述清楚。
选择id为demo的div作为vue的实例化区域，内部有todo-item组件，props是接收父类传入的参数，传入的是msg。于是需要在组件上绑定somemsg。v-bind可以省略，于是就可以写成:somemsg。

<div id="demo">
    <todo-item :somemsg="msg"></todo-item>
</div>

先来看 Vue.component 创建了一个组件

// 创建一个todo-item组件
Vue.component('todo-item' ,{
    props: ['somemsg'],
    template: '<div> {{somemsg}} </div>'
})

// 实例化Vue
new Vue({
    el: '#demo',
    data: {
        todos: [{
            text: '内容一'
        }, {
            text: '内容二'
        }],
        msg: 'message信息'
    }
})

有了上面的理解，就可以继续把v-for结合起来理解了。v-for相当于就是一个for…of…遍历，遍历组件多次，每次绑定一个遍历出的todo给sometodo，sometodo就可以在子组件内部的props接收使用了。

<div id="demo">
    <todo-item :somemsg="msg"></todo-item>
    <todo-item v-for="todo in todos" :sometodo="todo"></todo-item>
</div>

// 创建一个todo-item组件
Vue.component('todo-item' ,{
    props: ['somemsg', 'sometodo'],
    template: '<div> {{ somemsg || sometodo.text }} </div>'
})

// 实例化Vue
new Vue({
    el: '#demo',
    data: {
        todos: [{
            text: '内容一'
        }, {
            text: '内容二'
        }],
        msg: 'message信息'
    }
})

以上是最近学习的自己的理解，希望可以帮助到你。

这篇关于javascript - 新手上路,关于vue文档中不理解的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！