javascript - 了解 vue.js 中的 Prop

Question

我正在阅读学习 vue.js 的指南，进入 Prop 部分，遇到了一个问题。

我知道子组件有独立的作用域，我们使用 props 配置将数据从父组件传递到它，但是当我尝试它时我无法让它工作。

我有the example I'm working on up on js fiddle :

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>'
        }
   }
});

当我运行上面的代码时，我的输出只有:

, Chris

子组件的本地数据呈现良好，但传入的父组件数据要么未通过，要么未正确呈现。

我在 javascript 控制台中没有看到任何错误，并且正在呈现模板。

我是否误解了应该如何传递 Prop ？

Answer 1

您必须像这样将值绑定(bind)到组件属性:

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

Jsfiddle https://jsfiddle.net/y8b6xr67/

这里回答: Vue JS rc-1 Passing Data Through Props Not Working