Vuejs2 Vue组件。$在用例中

我不清楚如何在每个Vue实例中使用可用的方法。我确信我可能遗漏了一些用例，在这些用例中，一个事件将由同一个Vue组件（？）发出和使用，但目前我无法想象有多少。此外，该布线将在何处执行。这会在生命周期方法中吗

我的问题是：我有不相关的（即非同级、非后代或非公共父级）组件，它们根据在不同组件上进行的交互来更改视图。而且，这似乎无助于我的目标

---

此外，还需要了解如何/为什么在框架中提供。多谢各位

您可以使用

$on

-方法来实现

CommunicationHub

--公共mixin，用于非父子通信（如您的情况）

例如：您有两个Vue根应用程序：

RootAppA

和

RootAppB

。要在它们之间进行通信，可以创建

CommunicationHub

mixin和下一个代码：

let CommunicationHub = new Vue();

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

现在，您可以使用

$emit

-method从

RootAppA

发送自定义事件来发送数据，并通过在

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模式并不是那么灵活的解决方案。因此，如果您的应用程序长大了，您可能会希望使用-library（参见中的示例）