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）