vue this.$bus.$emit踩坑

前端这点事 504 0

最近开发项目中,遇到一个比较坑的问题,我们项目中有一个组件,复用了很多次,一天产品说,希望别的地方有处理问题时,通知到该组件,然后该组件去刷新数据,本来想着,这不是很简单嘛!

直接在其他地方emit出来,组件内部接受一下就好了,于是乎,有了以下的代码。

// 通知 emit
this.$bus.$emit('sucess')
// 复用的组件
this.$bus.$on('success', () => {
    .....
})

代码跑起来,发现怎么刷新了那么多次的请求,意识到,监听那边有问题,注释了监听的代码发现,果然不请求那么多次了。百度了下,发现每次组件销毁的时候,我应该在destroy生命周期里,

去除监听的方法,但是很恶心的是,我的组件基本不让销毁,那咋办呢?

于是乎,我想着,既然this.$bus.$on挂载在全局,每次组件挂载监听,我把之前的都清除了,就留最后一个监听不就可以了,于是乎,有了下面代码。

created (){
    this.$bus.$off('success')
    this.$bus.$on('success', () => {
        .....
    })
}

这样每次挂载一个组件,都会清除上一个挂载组件时的监听,确保只留下最后一个,即使组件相互切换,不会再次出发created生命周期,最后一个全局监听还是会存在,

项目跑起来以后,问题真的解决了。

标签: Vue

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~