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

不得不在destroy上删除事件处理程序.

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

Answer 2

您可以使用$ .once

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

Answer 3

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

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

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

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

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