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

Question

我想知道组件何时以及为什么无法处理正在监听的第一个$ 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加载的组件中处理（在此示例中为te组件计时器）：

//Timer Component

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

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

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

Answer 1

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

您需要找到一种在事件触发之前注册该侦听器的方法，方法是在组件树中进一步注册该侦听器，或者在更早的时候包括timer组件，但将其隐藏起来直到需要使用为止。

Answer 2

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