Vue組件。$ on用例

Question

不清楚如何使用每個Vue實例中可用的.$on(...)方法。我相信我可能錯過了一些使用情況，其中一個事件將被同一個Vue組件（？）發射和消耗，但目前我無法想象許多。另外，這個接線將在哪裏進行。那會是一種生命週期方法嗎？

我的問題：我有不相關的（即非兄弟姐妹，非後代或非共同父母）組件，它們根據不同組件上的交互來更改視圖。而且，$on(...)似乎沒有幫助我的目的。

而且，出現需要了解如何/爲什麼.$on(..)在框架中可用。謝謝。

Answer 1

您可以使用$on-方法來實現CommunicationHub - 普通mixin，對於非父母< - >子通信（就像你的情況一樣）。

例如：你有兩個Vue根應用程序：RootAppA和RootAppB。它們之間的溝通，您可以創建CommunicationHub混入與下面的代碼：

let CommunicationHub = new Vue(); 

Vue.mixin({ 
    data: function() { 
    return { 
     communicationHub: CommunicationHub 
    } 
    } 
}); 

現在，您可以通過從RootAppA與$emit - 方法發射自定義事件發送數據，並通過在RootAppB此事件上訂閱得到這個數據，與方法$on：

let RootAppA = { 
    methods: { 
    sendData(){ 
     this.communicationHub.$emit('customEvent', {foo: 'bar', baz: 1, comment: 'custom payload object'}); 
    } 
    } 
} 

let RootAppB = { 
    created(){ 
    this.communicationHub.$on('customEvent', (payload) => { 
     console.log(payload); //{foo: 'bar', baz: 1, comment: 'custom payload object'} 
    }); 
    } 
} 

順便說一句，請提及CommunicationHub模式不是更大的應用，因此靈活的解決方案。因此，如果您的應用程序將長大，也許您會想要使用Vuex -library（請參閱我的示例previous so-answer）