我正在阅读vue学习指南.js来到关于props 的部分,遇到了一个问题.
我知道子组件有独立的作用域,我们使用props配置将数据从父组件传递到子组件,但当我try 时,我无法让它工作.
我有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控制台中没有看到任何错误,模板正在呈现.
我是不是误解了props 应该如何传递?