Question

我正在使用eventBus进行组件之间的通信，但是由于使用生命周期方法，因此我不确定将侦听调用放在何处，因此会在事件执行之前调用它。

下面是代码：

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

Answer 1

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

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

Answer 2

您可以将事件侦听器放入已创建/安装的生命周期挂钩中，但是请记住在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时，以下生命周期hok事件被称为：

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

换句话说，如果要在“创建的”中注册事件列表，并在“ beforeDestroy”中将其删除，则它们将在创建后立即被删除。相反，如果您使用“已安装”挂钩，则可以解决此问题（针对此特定情况）。有点long风，但它让我绊倒了。