了解vue.js中的道具

Question

我正在学习vue.js的指南,进入道具部分,并遇到了一个问题.

我知道子组件有孤立的scops,我们使用props配置从父进程传递数据,但是当我尝试它时,我无法让它工作.

我有一个例子我正在研究js小提琴:

var vm = new Vue({
   el: '#app',
   // data from my parent that I want to pass to the child component
   data:{
       greeting: 'hi'
   },
   components:{
        'person-container':{

            // passing in the 'greeting' property from the parent to the child component
            props:['greeting'],

            // setting data locally for the child
            data: function (){
                return { name: 'Chris' };
            },

            // using both local and parent data in the child's template
            template: '<div> {{ greeting }}, {{ name }}</div>'
        }
   }
});

当我运行上面的代码时,我的输出只是:

, 克里斯

子组件的本地数据呈现正常,但传入的父数据要么未通过,要么未正确呈现.

我没有在javascript控制台中看到任何错误,并且模板正在渲染.

我误解了道具应该如何传入？

Answer 1

您必须将值绑定到组件prop,如下所示:

<person-container v-bind:greeting="greeting"></person-container>

Jsfiddle https://jsfiddle.net/y8b6xr67/

这里回答: Vue JS rc-1通过道具传递数据不起作用

Answer 2

我已经更新了你的小提琴

<person-container :greeting="greeting"></person-container>

您需要在html组件上将父级的道具传递给子级.