理解 vue.js 中的 props [英] Understanding props in vue.js

问题描述

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

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

我有 我正在研究 js fiddle 的例子:

var vm = new Vue({el: '#app',//我想传递给子组件的来自我的父组件的数据数据:{问候:'嗨'},成分:{'人容器':{//将 'greeting' 属性从父组件传递给子组件道具:['问候']，//在本地为孩子设置数据数据:函数(){返回{名称:'克里斯'}；},//在子模板中同时使用本地和父数据模板:'
{{问候}}，{{姓名}}</div>'}}});

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

<块引用>

，克里斯

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

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

我是否误解了 props 应该如何传入?

解决方案

你必须像这样将值绑定到组件 prop:

Jsfiddlehttps://jsfiddle.net/y8b6xr67/

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

I'm working through the guide for learning vue.js, got to the section on props, and ran into a question.

I understand that child components have isolated scops and we use the props configuration to pass data into it from the parent, but when I try it out I can't get it to work.

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

When I run the above code, my output is only:

, Chris

The data local to the child component renders fine, but the passed in parent's data is either not coming through or is not properly rendering.

I don't see any errors in the javascript console and the template is rendering.

Am I misunderstanding how the props are supposed to be passed in?

解决方案

You have to bind the value to the component prop like this:

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

Jsfiddle https://jsfiddle.net/y8b6xr67/

Answered here: Vue JS rc-1 Passing Data Through Props Not Working

这篇关于理解 vue.js 中的 props的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！