【问题标题】:VueJs component not getting data from its parent instanceVueJs 组件未从其父实例获取数据
【发布时间】:2017-04-09 10:57:12
【问题描述】:

我是 VueJS 的新手,我很困惑为什么文档中的一个简单示例对我不起作用。

这就是所有的代码。我希望它在页面上显示“Howdie Partners”。

HTML

<div id="app">
  <greeting></greeting>
</div>

JS

Vue.component('greeting', {
    template: '<h1>{{message}}</h1>',
    props: ['message']
});

var vm = new Vue({
  el: '#app',
  data: {
    message: "Howdie Partners!"
  }
});

JSFiddle 链接:https://jsfiddle.net/hq1yu0ct/

【问题讨论】:

    标签: components vue.js


    【解决方案1】:

    来自documentation

    我们还可以使用 v-bind 将 props 动态绑定到父节点上的数据。每当父级中的数据更新时,它也会向下流向子级。

    所以你需要传递greeting 组件中的道具,如下所示:

    <div id="app">
      <greeting :message="message"></greeting>
    </div>
    

    检查工作小提琴here

    【讨论】:

    • 奇怪的是我没有看到文档中提到的...可能还有另一种更典型的方式吗?
    • @CodyBugstein 也添加了文档链接。
    猜你喜欢
    • 2019-08-30
    • 2020-04-04
    • 1970-01-01
    • 2019-05-12
    • 1970-01-01
    • 1970-01-01
    • 2017-04-16
    相关资源
    最近更新 更多