在 vuejs 中使用 eventBus 在哪里监听事件答案

【问题标题】：where to listen for events using eventBus in vuejs在 vuejs 中使用 eventBus 在哪里监听事件
【发布时间】：2018-10-17 09:55:01
【问题描述】：

我正在使用 eventBus 在组件之间进行通信，但由于我正在使用生命周期方法，所以我不确定将侦听调用放在哪里，所以它在事件执行之前被调用。

下面是代码：

mounted() {
      eventBus.$on('quoteAdded',someFunc);    
 }

【问题讨论】：

【解决方案1】：

你没有调用任何东西，你只是注册了事件监听器。大多数情况下，可以尽快设置这些事件侦听器，以便您可以将事件侦听器移动到 created 生命周期挂钩，因为这将比 mounted 挂钩更早运行。

mounted 钩子通常是放置需要渲染 DOM 模板的代码的好地方。大多数事件侦听器不需要它，因为他们正在侦听的事件要么在 DOM 准备就绪时触发（因此它已经进行了检查），要么根本不使用它。

【讨论】：

【解决方案2】：

你可以把你的事件监听器放在一个像 created/mounted 这样的生命周期钩子中，但记得在 beforeDestroy 生命周期钩子中删除监听器，否则监听器会在组件被销毁后挂起。您将使用以下命令在应用程序的其他位置（可以选择传递数据）发出一个事件：

eventBus.$emit('quoteAdded', data);

然后您的侦听器将在它触发并执行回调时将其拾取（在您的示例中为 someFunc）。

顺便说一句，我发现，对于全局事件侦听器，您必须非常小心使用哪个生命周期挂钩来注册它们，尤其是当您可能在同一个组件之间切换时。

例如，我有一个这样的复杂布局：

<componentA>
    <componentB v-if="flag"></componentB>
    <componentC v-else>This component has componentB inside it!!</componentC>
</componentA>

我的全局事件监听器注册在 componentB 中。请注意，componentB 也嵌套在 componentC 中，我们使用标志在组件之间切换。

当我们从 componentA 切换到 componentC 时，会调用以下生命周期钩子事件：

C (created) -> B (beforeDestroy) -> C (mounted)

换句话说，如果您在“created”中注册事件列表并在“beforeDestroy”中删除它们，那么它们将在创建后立即被删除。相反，如果您使用 'mounted' 钩子，则此问题已解决（针对此特定情况）。有点啰嗦，但它绊倒了我。

【讨论】：