[前端]【转】vue——解决eventBus.$on多次触发的问题

最近项目中使用eventBus进行组件之间的通信，但是发现会出现，第一次会触发接口一次，第二次会触发接口两次，第N次会触发接口N次


A组件：


eventBus.$emit("fetchList")


B组件：


created(){
 eventBus.$on("fetchList",()=>{
 this.getListData()
 })
}


产生原因：
eventBus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件被注销，但是原来vue组件向Bus容器中添加的事件监听器并不会被移除。因此，当下次进入这个vue组件对应的页面时，执行到eventBus.$on时，又会向Bus容器中添加一个重复的事件监听器，以此类推，导致Bus容器中有很多个一模一样的事件监听器，从而导致事件只被触发一次，但是回调函数被执行多次的现象。


解决方法：


方法1：


created(){
 eventBus.$off.$on("fetchList",()=>{
 this.getListData()
 })
}


方法2：


beforeDestroy(){
 eventBus.$off("fetchList")
}

转自：https://blog.csdn.net/Kiruthika/article/details/121024858