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个对象＆amp;将数据作为道具传递，但这只有在我拥有最少的子/兄弟组件时才有效。

提前致谢！

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或{{1} }。

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

在此处了解Vue商店：Vuex

如何在兄弟vue.js组件之间共享数据？

2 个答案: