vue——解决eventBus.$on多次触发的问题
最近项目中使用eventBus进行组件之间的通信,但是发现会出现,第一次会触发接口一次,第二次会触发接口两次,第N次会触发接口N次A组件:eventBus.$emit("fetchList")B组件:created(){eventBus.$on("fetchList",()=>{this.getListData()})}产生原因:this.root.Bus.root.Bus.root.Bus
最近项目中使用eventBus进行组件之间的通信,但是发现会出现,第一次会触发接口一次,第二次会触发接口两次,第N次会触发接口N次
A组件:
eventBus.$emit("fetchList")
B组件:
created(){
eventBus.$on("fetchList",()=>{
this.getListData()
})
}
产生原因:
this.
r
o
o
t
.
B
u
s
.
root.Bus.
root.Bus.on实际是向Bus容器中添加一个事件监听器,当页面跳转时,原来的vue组件被注销,但是原来vue组件向Bus容器中添加的事件监听器并不会被移除。因此,当下次进入这个vue组件对应的页面时,执行到this.
r
o
o
t
.
B
u
s
.
root.Bus.
root.Bus.on时,又会向Bus容器中添加一个重复的事件监听器,以此类推,导致Bus容器中有很多个一模一样的事件监听器,从而导致事件只被触发一次,但是回调函数被执行多次的现象。
解决方法:
方法1:
created(){
eventBus.$off.$on("fetchList",()=>{
this.getListData()
})
}
方法2:
beforeDestroy(){
eventBus.$off("fetchList")
}
更多推荐
所有评论(0)