VueJs 组件未从其父实例获取数据

Question

我是 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/

Answer 1

来自documentation：

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

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

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

检查工作小提琴here。