Vue $on 事件在第一次使用事件总线时不会触发答案

【问题标题】：Vue $on event doesn't fire the first time using event busVue $on 事件在第一次使用事件总线时不会触发
【发布时间】：2019-12-04 16:41:47
【问题描述】：

我想知道组件何时以及为什么无法处理正在侦听的第一个 $on 事件。我有这个函数，调用时会触发 2 个事件：

 initModalTimer: function () {
    serverBus.$emit('initSettingsModal', {
       'name': 'Timer',

    });

    serverBus.$emit('initTimer', {
       'timer_type': this.timer_type,
    });
 }

InitSettingsModal 传递模态信息：

//Modal Component

<template>
<div v-else-if="elementName === 'Timer'">
    <timer></timer>
</div>
<div v-else-if="elementName === 'Socials'">
    <socials></socials>
</div>
</template>

<script>
   //Other Vue stuff
   created() {
      serverBus.$on('initSettingsModal', (elem_identifier) => {
        this.elementName = elem_identifier["name"];
      });
    }
</script>

第二个事件在根据模态组件中的 v-if 加载的组件中处理（在本例中为组件计时器）：

//Timer Component

created() {
     serverBus.$on('initTimer', (response) => {
         //Execute code
     });
}

但第一个'initTimer'从未被触发。当我再次执行第一个函数（initModalTimer）时，一切正常。

我在Reddit 上发现了一个类似的问题，有人建议“事件总线监听 $on 是在 $emit 之后发生的”。但我不明白这是什么意思。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

我认为正在发生的事情是您的 initTimer 侦听器在您的 <timer> 组件通过您的 v-else-if 语句呈现之前没有注册。

您需要找到一种方法在事件触发之前注册该侦听器，方法是在组件树的更上方注册它，或者更早地包含计时器组件，但在需要时将其隐藏起来。

【讨论】：

谢谢。我通过使用 CSS 来显示组件而不是 v-if / else 来解决。

【解决方案2】：

可能的解决方案是将 $on 事件放在函数 created() 上。这个对我有用！

【讨论】：