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

Posted 2021-01-27 chenhuichao

 

问题描述：只要页面没有强制刷新，存在组件切换，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)
  },