Question

我不清楚如何使用每个Vue实例中可用的.$on(...)方法。我确信我可能错过了一个用例，其中一个事件将由相同的Vue组件（？）发出和消耗，但目前我无法想象很多。此外，还将执行此布线。那会是生命周期方法吗？

我的问题：我有无关（即非兄弟，非后代或非共同父）组件，这些组件根据在不同组件上进行的交互来更改视图。并且，$on(...)似乎没有帮助我的目的。

并且，需要了解框架中如何/为什么.$on(..)可用。谢谢。

Answer 1

您可以使用$on - 方法实施CommunicationHub - 普通mixin，非父母＆lt; - ＆gt;儿童交流（就像你的情况一样）。

例如：您有两个Vue根应用程序：RootAppA和RootAppB。要在它们之间进行通信，您可以使用下一个代码创建CommunicationHub mixin：

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-pattern对于更大的应用程序来说并不是那么灵活的解决方案。因此，如果您的应用程序会成长，也许您会想要使用Vuex - 库（请参阅previous so-answer中的示例）

Vue组件。$用例

1 个答案: