向 Vue.js 组件添加数据答案

【问题标题】：Adding data to a Vue.js Component向 Vue.js 组件添加数据
【发布时间】：2016-05-11 22:12:30
【问题描述】：

大家好，我正在了解 Vue.js，并且我已经为表格创建了一个组件（称为 setupTable）。我希望能够向其中动态添加数据。我知道 Vue.js 会监听数据元素的推送，但我似乎无法通过 setupTableComponent.data 访问我的组件的数据元素。我将如何访问并将数据附加到该组件？

var setupTableComponent = Vue.extend({
  template: '<table id="data-table">'+
              '<tr v-for="item in items">'+
                '<td>{{item.b}}</td>' +
                '<td>{{item.d}}</td>' +
                '<td>{{item.t}}</td>' +
              '</tr>' +
            '</table>',
  data: function(){
    return { items: [
      { t: "Tester", b: "Buster", d: "Duster"},
      { t: "Not a Tester", b: "Not a Buster", d: "Not a Duster"}
    ]};
  }
});

Vue.component('setup-table-component', setupTableComponent);

var setUpDataTableV = new Vue({
  el: '#sidebar',
  ready: function() {
  }
});

【问题讨论】：

标签： javascript mvvm vue.js

【解决方案1】：

您可以使用v-ref 直接访问子组件：

<div id="sidebar">
  <button @click="onClick">Add item</button>
  <setup-table-component v-ref:table></setup-table-component>
</div>

然后，像这样访问table ref的数据：

this.$refs.table.$data.items.push(data)

https://jsfiddle.net/gjtf6sse/1/

【讨论】：

这真的是最好的方法吗？
另外两个选项：1) 你可以$broadcastsetUpDataTableV 上的一个事件并在setupTableComponent 上捕获它；2) 你可以将items 移动到setUpDataTableV 并传递一个@ 987654332@ 对它的引用向下到setupTableComponent，具有两种绑定方式。
@DavidK.Hess 我真的很喜欢传递参数引用以保持双向数据绑定的想法。这种方法有什么缺点吗？
不知道 - 只是要设置和维护组件之间的胶水。

【解决方案2】：

您可以使用 JavaScript 推送方法将数据推送到现有数组中。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

this.items.push(数据)

【讨论】：