兄弟vue.jsコンポーネント間でデータを共有するにはどうすればよいですか？

Question

誰かがvue.jsコンポーネント間でデータを共有できますか？たとえば、ボタンと入力ボックスの2つのコンポーネントを含むテーブルコンポーネントがあります。ボタンコンポーネントをクリックすると、入力コンポーネントのデータを含めて、ボタンコンポーネントの行のデータを返すようにします。今すぐ、ボタンをクリックして兄弟入力コンポーネントの内部にあるものを除いて行データを返すことができます。どのように私はこれを行うことができます誰も考えを持っていますか？ここに私のバイオリンは、私がこれまでに達成したものを証明するためだと私は以下

をやろうとしていることは、関連するコードがあり、ここでまた私のHTMLが含まれて私のjsfiddleです：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>