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

Question

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

下面是相关代码，这是我的 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 对象中并将数据作为 Prop 传递来完成此操作，但这仅在我有最少数量的子级/兄弟级时才有效组件..

提前致谢!

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>