Question

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

我知道子组件有孤立的scops，我们使用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>'
        }
   }
});

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

，克里斯

子组件的本地数据呈现正常，但传入的父数据未通过或未正确呈现。

我没有在javascript控制台中看到任何错误，而且模板正在渲染。

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

Answer 1

您必须将值绑定到组件prop，如下所示：

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

的jsfiddle https://jsfiddle.net/y8b6xr67/

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

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，Chris” 更多使用说明书：https://vuejs.org/v2/guide/components.html#Props

了解vue.js中的道具

3 个答案: