码迷,mamicode.com
首页 > 其他好文 > 详细

vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】

时间:2018-12-15 00:57:34      阅读:339      评论:0      收藏:0      [点我收藏+]

标签:his   sub   需要   view   nal   format   没有   图片   bsp   

 

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

 

vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】

标签:his   sub   需要   view   nal   format   没有   图片   bsp   

原文地址:https://www.cnblogs.com/chenhuichao/p/10122264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!