Vue.js：全局事件总线未能捕获事件答案

【问题标题】：Vue.js: Global event bus is failing to catch the eventVue.js：全局事件总线未能捕获事件
【发布时间】：2020-02-12 04:48:58
【问题描述】：

我正在尝试创建一个从Source.vue 发出的全局事件总线，以便在Destination.vue 中捕获。后一个组件必须在事件被捕获时运行一个函数。

Source.vue:

.then(() => {
    eventBus.$emit("fireMethod");
})

Destination.vue:

updated() {
  eventBus.$on("fireMethod", () => {
    this.reqMethod();
  });
}

main.js:

export const eventBus = new Vue();

我还在这两个组件中导入了 main.js 文件。但这似乎不起作用，因为事件根本没有被捕获。这里有什么问题？提前致谢

【问题讨论】：

您的问题中没有足够的上下文来确定问题。 Source.vue 中的代码什么时候执行？ Destination.vue 什么时候挂载？在这里使用updated 钩子有什么特别的原因（例如，而不是mounted）？
嘿@tony19，Source.vue 中的代码是在数据库中执行了某些操作后执行的（在这种情况下是删除）。此处Destination.vue 显示了该数据，因此我希望每次数据库发生更改时都可以更新它，而无需我访问该组件。如果我使用 mounted 钩子就不会发生这种情况，所以我必须使用 updated 钩子
好的，但这并不能说明Destination 何时收听与Source 中发生的事件相关的事件的时间线。有可能Destination 注册了事件之后 Source 已经发出它。请注意，事件不会为侦听器排队。您能否提供一个可重现的示例（例如，在 Codesandbox 中）？

【解决方案1】：

更新后的钩子在组件上的数据更改并且 DOM 重新呈现后运行。因此，在初始渲染时，您的事件侦听器未注册，因为当时未触发事件。

请通过fiddle 了解有关 vue 组件生命周期的清晰概念。

因此在 Destination.vue 中：

您的事件挂钩应该已挂载而不是更新。

mounted() {
  eventBus.$on("fireMethod", () => {
    this.reqMethod();
  });
}

【讨论】：

【解决方案2】：

要注册全局事件总线，您可以在 main.js 中使用它

Vue.prototype.$eventHub = new Vue();        //global event bus

然后在你的组件中像这样使用它

//on emit
this.$eventHub.$on('your-event',function(){});

//to emit
this.$eventHub.$emit('your-event',data);

【讨论】：