了解 vue.js 中的道具

Question

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

我知道子组件有独立的作用域，我们使用 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 控制台中没有看到任何错误，模板正在呈现。

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

Answer 1

您必须像这样将值绑定到组件属性：

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

Jsfiddle https://jsfiddle.net/y8b6xr67/

在这里回答：

Answer 2

我已经更新了你的 fiddle

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

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

Answer 3

您也可以将任何字符串传递给 "greeting"，只需像普通 html 属性一样设置它，而不使用 v-bind 指令。

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

也可以。请注意，您通过这种方式传递的任何内容都将被解释为纯字符串。

<person-container greeting="2 + 2"></person-container>

将得出“2 + 2，克里斯”。
更多用户指南：https://vuejs.org/v2/guide/components.html#Props

了解 vue.js 中的道具

Understanding props in vue.js

javascript

vue.js