如何在兄弟 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