vue组件中props有什么作用

Question

<div id="app">
    <ul>
        <todo-item v-for= "item in groceryList" v-bind:todo="item"></todo-item>    
    </ul>
</div>

Vue.component('todo-item',{
    props:['todo'],//这段
    template:"<li>{{ todo.text}}</li>"
})
var app = new Vue({
    el:'#app',
    data:{
        groceryList:[
            {text:'shucai'},
            {text:'nairao'},
            {text:'else'}
        ]
    }
})

Answer 1

Vue.component('todo-item',{
    props:['todo'],//这段
    template:"<li>{{ todo.text}}</li>"
})

正如上面代码所写，你在组件的模板中写上了{{todo.text}},可是todo并没有text这个键
是在父组件中定义的

<div id="app">
    <ul>
        <todo-item v-for= "item in groceryList" v-bind:todo="item"></todo-item>    
    </ul>
</div>

在父组件中你绑定了todo=item，而item中有text这个键
综上所述，其实就是父组件向子组件传递参数的作用，有一句官方上的话是，props down ,events up.希望对你有帮助哦~