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

有人能帮我在vue.js组件之间共享数据吗？例如，我有一个表组件，它包含两个组件：一个按钮和一个输入框。当我单击按钮组件时，我希望它返回它所在行的数据，包括输入组件中的数据。现在，我可以单击按钮并让它返回行数据，除了它的同级输入组件内部的数据。有人知道我该怎么做吗？这是我的提琴，展示我迄今为止所取得的成就和我正在努力做的事情

下面是相关代码，这是我的JSFIDLE，其中还包括我的HTML：

我的父级

表

组件：

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

我的两个同级组件（

button1

和

input

）

注意-我知道我完全可以通过将数据放入父对象的

data

对象并将数据作为道具传递来实现这一点，但这只有在我的子/同级组件数量最少的情况下才有效

提前谢谢

这就是我制作表格（带动作）的方式-

基本上你会利用

一些代码：

  <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>

---

实现这一点的更可靠和可扩展的方法是使用存储，所有需要在组件之间共享的数据都应该驻留在中央存储中，然后每个组件都可以

获取或
设置这些数据

最初你可能需要花一个小时左右的时间来熟悉这个概念，但从长远来看，它将非常有用

在此处了解Vue应用商店：
这是flux风格体系结构的完美用例。我强烈建议您查看Vuex，VueJS flux风格的官方国家图书馆。
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 #'
        },
      ],
  },
});

  <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>