Vue.jsイベントをコンポーネントチェーンまで伝播する方法は？

Question

私は3つのコンポーネントを持っています。

私はNPMからそれを持っている原因Datatableコンポーネントが何をするかに影響を与えません。

今度はEditButtonからZonelistにイベントを送信したいと思います。

Zonelistコンポーネント：

<template> 
<datatable :columns="table_columns" :data="table_rows" filterable paginate v-on:remove="removeItem"></datatable> 
</template> 
<script> 
import datatable from 'vuejs-datatable'; 
import moment from 'moment'; 
export default { 
    data() { 
     return { 
      table_columns: [ 
       {label: "Zone", component: 'ZoneLink'}, 
       {label: "Last updated", callback (row) { 
        let locale = $('html').closest('[lang]').attr('lang') || 'en'; 
        moment.locale(locale); 
        return moment(row.last_updated).format('D. MMM YYYY'); 
       }}, 
       {label: '', component: 'EditButton'} 
      ], 
      table_rows: [ 
       { 
        "name": "xyz.de", 
        "last_updated": "2017-10-21 17:29:50" 
       } 
      ], 
      form: { 
       name: '', 
       errors: [] 
      } 
     }; 
    }, 
    components: { 
     datatable 
    }, 
    methods: { 
      removeItem (item) { 
       this.table_rows.forEach((value, index, array) => { 
        if (value.name === item) { 
         Vue.delete(array, index); 
        } 
       }); 
      } 
     } 
} 
</script> 

今私のEditButtonコンポーネント$emit()のパラメータを持つremoveイベント。

しかし、何も起こりません。だから、私はvueがリスナーを見つけることができないと思う。

（私はここES6からメソッドの短縮形を使用しています）

どのように私はEditButtonからthis.$parent.$parent経由Zonelistの状態を突然変異させずに適切にこれを行うことができますか？

Answer 1

Non parent-child communicationは、通常、イベントバスまたは状態管理システムによって処理されます。

アプリケーションがより複雑でない限り、イベントバスはおそらく必要なものです。単一のファイルコンポーネントを使用しているので、おそらくあなたのメインスクリプトでウィンドウ上にバスを宣言する必要があるかもしれません。

あなた EditButtonで次に

window.bus = new Vue() 

、あなたはイベント

bus.$emit('some-event', someData) 

そして、あなたのZoneListあなたはそれを聞くことができるで

を発することができます。

bus.$on('some-event', someData => this.doSomething(someData))