javascript - 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上发现了类似的问题有人建议“事件总线监听 $on 发生在 $emit 之后”。但我不明白这是什么意思。

Answer 1

我认为发生的事情是你的 initTimer直到您的 <timer> 才注册监听器组件通过您的 v-else-if 呈现陈述。

您需要找到一种方法在事件触发之前注册该监听器，方法是将其进一步注册到组件树中，或者更早地包含计时器组件，但在需要时将其隐藏在 View 中。