Vue.js 方法使用 $emit 和 $on 多次调用，而它应该只调用一次

Question

我正在使用总线以允许组件通过此链接中描述的方法与其他组件交互：https://forum.vuejs.org/t/create-event-bus-in-webpack-template/4546/2。

我有一个在创建的钩子中调用的方法，它使用总线发出事件。

created () {
  this.getReviewDeck()
},
myMethod () {
    bus.$emit('increment')
}

在另一个组件（包含在上述组件中）中，我将事件侦听器附加到创建的挂钩中，如下所示：

created () {
  bus.$on('increment', this.incrementCount)
},
incrementCount () {
  console.log('count incremented')
}

如果我第一次访问该组件，一切正常，控制台将记录一次“计数递增”。但是，如果我离开该组件，然后在下次“计数递增”时导航回它，将被记录两次，如果我离开并再次返回，它现在将被记录三次，等等。

我不太清楚到底发生了什么或如何最好地解决这个问题，这样每次我访问组件时，消息只会记录一次而不是多次。

Answer 1

移除所有监听器：

this.$eventBus.$off()

将此添加到您的主要组件生命周期的 beforeDestroy() 事件中。

beforeDestroy() {
   this.$bus.$off('chatData');
}

Answer 2

似乎在 Vue 源代码中发生了一些变化，因为在 destroy 或 beforeDestroy 或 beforeRouteLeave 或任何其他挂钩中关闭 eventBus 侦听器会执行以下操作 - 旧侦听器与在 created 挂钩中重新注册的新侦听器一起被删除。

对于destroyed 和beforeDestroy 钩子，这是可以理解的，因为它们是在created 钩子之后调用的。因此 created() 添加了监听器，并且 destroy() 将它们全部删除，而不仅仅是之前 created() 中的监听器。但是对于路由挂钩，我不理解这种行为，因为它们是在 created() 之前调用的，但是所有相同的重新注册的侦听器都不起作用。

我所做的是在重新注册之前关闭已创建挂钩中的 eventBus 侦听器

created() {
  eventBus.$off("someListener");
  eventBus.$on("someListener", () => {
    // do smth
  })
}

但这只有在组件被重新创建时才有效，它在应用程序生命周期中只创建一次，注册的监听器将不起作用。但是如果组件创建一次我们就不需要这个重新注册了。

Answer 3

我遇到了类似的问题，上面提到的答案都不适合我。 我通过将 eventBus 添加为 Vue 全局实例解决了这个问题

在 main.js 文件中添加这个

Vue.prototype.$bus = new Vue();

并在组件中调用它，例如：

   mounted(){
    this.$bus.$on('chatData', (data) => {
        console.log('receieved in component');
    });
   },
   beforeDestroy() {
    this.$bus.$off('chatData');
   },
   methods:{
    sendData(data){
     this.$bus.$emit('someData',data); 
    }
   }

Answer 4

这适用于如果您只想在事件发出后执行一次操作的情况。如果您想继续侦听某个事件，例如：如果您将鼠标悬停在图表上的某个数据点上，您想触发其他组件的某些操作，该怎么办。 在这种情况下，使用 $once 不起作用。 我面临着同样的问题，我在悬停时发出一个事件并使用 $on 订阅它，它应该只被调用一次，但在我的情况下它被多次调用。

这就是我发出事件的方式；

this.$eventBus.$emit("SHOW_HOVERLINE", d);

这就是我订阅活动的方式；

this.$eventBus.$on("SHOW_HOVERLINE", this.someFunction);

Answer 5

你可以使用 $.once

created () {
  bus.$once('increment', this.incrementCount)
},

Answer 6

必须在销毁时删除事件处理程序。

 beforeDestroy () {
    EventBus.$off('increment', this.incrementCount)
 },