我正在阅读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 应该如何传递?

推荐答案

必须将值绑定到组件props ,如下所示:

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

Jsfiddle

回答如下:

Vue.js相关问答推荐

无法从CDN使用Vue和PrimeVue呈现DataTable

虚拟DOM在Vue中姗姗来迟

正在try 访问vutify中v-select(ItemProps)的嵌套json值

Vuejs 通过数据键迭代复杂对象

Vuex 和 Event Bus 有什么区别?

aspnet core如何在deploy上构建webpack

如何在 Vue.js 中添加动态组件/部分

如何获取 Vue 路由历史记录?

如何从我的 Vuetify 数据表中正确更新 Vuex 状态

如何像 React 中的 {...props} 一样在 Vue 中解构 props?

如何使表格行可点击并展开行 - vue.js - element-ui

SassError:媒体查询表达式必须以(开头

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性?

动态更改我的 Vue.js SPA 主题的最佳方式?

如何在 Vue.js 应用程序中正确下载 Excel 文件?

如何在 vue.js 中通过单击事件发出值

VS Code - 在 .vue 文件中启用 autoClosingTags 选项

Vue.js 无法读取 null 的属性 length长度

VueJS 按键查找元素

如何修复套接字 io 中的 400 错误错误请求?