vueの代理イベント

Question

あるインスタンスから別のインスタンスにaventを委任しようとしています。

は、私がこの本VUEインスタンスに

var toolbarApp = new Vue({ 
    el: '#toolbar', 
    data: { 

    }, 
    methods: { 
     add: function (event) { 
      alert('lol'); 
     } 
    } 
}); 

作業イベントを追加します。しかし、今、私はイベントを追加この添付するこの

<div id="toolbar"> 
<button v-on:click="add" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Ny</button> 
</div> 

のようなボタンでページの上部にあるツールバーを持っていますこのような別のインスタンスに

var contactApp = new Vue({ 
    mixins: [toolbarApp], 
    el: '#contact', 
    data: { 
     showGrid: true, 
     showForm: false, 
     editMode: false 
    }, 
    created: function() { 
     this.getContacts(); 
    }, 
    methods: { 
     getContacts: function() { 
      $.getJSON(this.apiGrid, function (data) { 
       this.contacts = data; 
      }.bind(this)); 
     }, 
     add: function (event) { 
      alert('hej'); 
     } 
    } 
}); 

しかし、私は別のインスタンスのためにこれを添付できません。これを行う方法はありますか？ 混雑していない運があっても試してみました。

何をしようとするアドバイス

Answer 1

のおかげでは「イベント・バス」

EventBus = new Vue(); 

var toolbarApp = new Vue({ 
    el: '#toolbar', 
    data: { 

    }, 
    methods: { 
     add: function (event) { 
      EventBus.$emit('add-something', this.somevar); 
     } 
    } 
}); 

のためにもタイトルはあなたの他のインスタンスでは、そこだ、ユニークではありません。

var contactApp = new Vue({ 
    mixins: [toolbarApp], 
    el: '#contact', 
    data: { 
     showGrid: true, 
     showForm: false, 
     editMode: false 
    }, 
    created: function() { 
     this.getContacts(); 
     EventBus.$on('add-something', function(somevar) { 
      // do cool stuff, like this.getContacts... 
     }); 
    }, 
    methods: { 
     getContacts: function() { 
      $.getJSON(this.apiGrid, function (data) { 
       this.contacts = data; 
      }.bind(this)); 
     }, 
     add: function (event) { 
      alert('hej'); 
     } 
    } 
}); 

定義：

Somet Vue.jsコンポーネント間でデータをやり取りするためのすばやく簡単なソリューションが必要です。

単純なアーキテクチャのアプリケーションでは、イベントを使用してコンポーネント間で通信すれば十分です。このために、迅速なソリューションを作成し、EventBusを実装することができます。 EventBusでは、あるコンポーネントでイベントを発行し、そのイベントを別のコンポーネントで待機することができます。

https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860