javascript 理解 vue.js 中的 props
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33616772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding props in vue.js
提问by Chris Schmitz
I'm working through the guide for learning vue.js, got to the section on props, and ran into a question.
我正在阅读 vue.js 学习指南，进入 props 部分，遇到了一个问题。
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.
我知道子组件具有独立的作用域，我们使用 props 配置将数据从父组件传递给它，但是当我尝试它时，我无法让它工作。
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.
我在 javascript 控制台中没有看到任何错误，模板正在呈现。
Am I misunderstanding how the props are supposed to be passed in?
我是否误解了道具应该如何传递？
回答by Ric0
You have to bind the value to the component prop like this:
您必须像这样将值绑定到组件 prop：
<person-container v-bind:greeting="greeting"></person-container>
Jsfiddle https://jsfiddle.net/y8b6xr67/
jsfiddle https://jsfiddle.net/y8b6xr67/
Answered here: Vue JS rc-1 Passing Data Through Props Not Working
在这里回答： Vue JS rc-1 通过道具传递数据不起作用
回答by Christophe
回答by Rob
You can also pass any string to "greeting" by just setting it like normal html attribute, without using v-bind directive.
您还可以将任何字符串传递给“greeting”，只需像普通的 html 属性一样设置它，而不使用 v-bind 指令。
<person-container greeting="hi"></person-container>
Will also work. Note that anything you pass that way will be interpreted as plain string.
也会工作。请注意，您以这种方式传递的任何内容都将被解释为纯字符串。
<person-container greeting="2 + 2"></person-container>
Will result in "2 + 2, Chris".
More in user guide: https://vuejs.org/v2/guide/components.html#Props
将导致“2 + 2，克里斯”。
更多用户指南：https: //vuejs.org/v2/guide/components.html#Props
