了解 vue.js 中的道具

Question

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

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

我有 我正在研究 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>'
        }
   }
});

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

， 克里斯

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

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

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

原文由 Chris Schmitz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须像这样将值绑定到组件道具：

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

Jsfiddle https://jsfiddle.net/y8b6xr67/

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

原文由 Ric0 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我已经更新了你的 小提琴

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

您需要在 html 组件上将 props 从父级传递给子级。

原文由 Christophe 发布，翻译遵循 CC BY-SA 3.0 许可协议