解决vue使用bus被多次触发问题

Posted 2023-03-27

参考技术A 很简单，先解绑再接收。造成原因个人理解是事件在触发后接收方还没有来得及作出响应就会一直堆积起来，每次都会叠加

查看bus如何使用请看 vue中使用bus总线（eventbus） 实现兄弟组件间的通讯

vue中eventbus被多次触发（vue中使用eventbus踩过的坑）bus.$on事件被多次绑定

 

问题描述：只要页面没有强制刷新，存在组件切换，bus.$on方法会被多次绑定，造成事件多次触发

 

触发bus.$on中绑定的方法.png

 

bus.$on多次绑定.png

解决办法：在每次调用方法前先解绑事件( bus.$off )，然后在重新绑定( bus.$on )

 bus.$off("backUpLevel");
        bus.$on(‘backUpLevel‘, () => {
            if(self.ONION.length <= 1){ 
                self.jumpSubDir()
            }else{
                let len = self.ONION.length-1
                self.jumpTeamId(self.ONION[len].id,self.ONION[len].name,self.ONION[len].type)
            }
        })

 

每次绑定前解绑bus.$on方法.png

解决：
看一下github上提出的。issue
https://github.com/vuejs/vue/issues/3399

 

image.png

尤大大提出了以下解决：

 

image.png

*就是说，这个$on事件是不会自动清楚销毁的，需要我们手动来销毁。（不过我不太清楚这里的external bus 是什么意思，有大神能解答一下的吗，尤大大也提到如果是注册的是external bus 的时候需要清除）****

所以。我在B组件页面中添加Bus.$off来关闭。代码如下：

// 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。
  beforeDestroy () {
    bus.$off(‘get‘, this.myhandle)
  },