如何在同级vue.js组件之间共享数据？

Question

有人可以帮助我在vue.js组件之间共享数据吗？例如，我有一个Table组件，其中包含两个组件：按钮和输入框。当我单击按钮组件时，希望它返回其所在行的数据，包括输入组件中的数据。现在，我可以单击该按钮，让它返回行数据，除了其兄弟输入组件内部的内容。有谁知道我该怎么做？这是我的小提琴，以证明我到目前为止所取得的成就以及我正在尝试做的事情

下面是相关代码，这是我的jsfiddle，其中也包括我的HTML：https://jsfiddle.net/rfy7sqzf/2/

我的父母Table组件：

Vue.component('my_table', {
  template: '#my_table',
  props: {
    data: Array,
    columns: Array,
    actions: Array
  }
});

我的两个同级组件（​​button1和input）

const button1 = Vue.extend({
  template:'<button class="btn btn-primary" @click="view">View</button>',
  methods: {
    view: function () {
      console.log('--row data--', this.row_data)
    }
  },
  props: ['row_data']
})

const input = Vue.extend({
  template:'<input type="text" />'
})

我的主要Vue应用：

var vm = new Vue({
  el: '#el',
  data: {
      actions: [
        {
          name: 'view',
          label: 'View Company',
          tmpl: button1
        },
        {
          name: 'qty',
          label: 'Quantity',
          tmpl: input
        },
      ],
      companies: [
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
        {
          company_name: 'abc',
          company_email: 'some_email',
          company_phone_number: '###',
        },
      ],
      columns: [
        {
          field: 'company_name',
          label: 'Company',
        },
        {
          field: 'company_email',
          label: ' Email'
        },
        {
          field: 'company_phone_number',
          label: 'Phone #'
        },
      ],
  },
});

[注意-我了解我可以通过将数据放置在父级的data对象中并将数据作为道具传递来完全做到这一点，但这仅在我的子/兄弟组件数量最少的情况下才有效。

提前感谢！

Answer 1

这是我制作表格（带有操作的方式-http://jsfiddle.net/jonataswalker/qgjgkud8/

基本上，您将使用Scoped Slots。

某些代码：

  <vue-table :fields="fields" :rows="rows">
    <template slot="actions" scope="props">
      <my-button title="View" @click.native="view(props.row)"></my-button>
      <my-button title="Edit" @click.native="edit(props.row)"></my-button>
      <my-button title="Delete" @click.native="remove(props.row)"></my-button>
    </template>
  </vue-table>

Answer 2

一种更强大且可扩展的方法是通过使用存储，将需要在组件之间共享的所有数据都驻留在中央存储中，然后每个组件都可以get或set此数据。] >

您可能需要花一个小时左右来熟悉这个概念，但是从长远来看，它将非常有用。

在此处了解Vue商店：Vuex