vue代表事件

Question

我試圖從一個實例委託avent到另一個實例。

我對頁面頂部的工具欄，像這樣

<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> 

一個按鈕，此添加事件的工作在這個VUE實例

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

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

但現在我想附上這個添加事件像這樣

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'); 
     } 
    } 
}); 

另一個例子，但我不能重視這個，因爲不同勢實例。有沒有辦法做到這一點？ 也試過與mixedin沒有運氣。

感謝諮詢

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 imes你需要一個快速簡單的解決方案來在Vue.js組件之間傳遞數據。

對於具有簡單體系結構的應用程序，它足以使用事件在組件之間進行通信。爲此，我們可以創建一個快速解決方案並實現EventBus。 EventBus允許我們在一個組件中發出一個事件，並在另一個組件中偵聽該事件。

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