Vue的this.$root.Bus.$on事件被多次触发、多次监听的问题
前端vue项目中,各个组件(非父子关系也可)之间可以通过Bus进行事件通信。main.js中:import Vue from 'vue'const Bus = new Vue();const app = new Vue({el: '#app',data: {Bus},router,components: {App},template: '<App/...
·
前端vue项目中,各个组件(非父子关系也可)之间可以通过Bus进行事件通信。
main.js中:
import Vue from 'vue'
const Bus = new Vue();
const app = new Vue({
el: '#app',
data: {Bus},
router,
components: {App},
template: '<App/>'
})
进过如上配置后即可在各个组件中通过如下:
this.$root.Bus.$emit("事件名", 参数1, 参数2, ...);
来给总线Bus发一条事件信息。
其他组件通过如下:
this.$root.Bus.$on("事件名", 回调函数);
来监听总线Bus中的某个事件,执行回调函数了。
问题描述:
有时候会发生事件只被emit触发了一次,但是回调函数却被执行了多次的现象。这种现象往往发生在页面跳转退出后重新进入的时候。
产生原因:
this.$root.Bus.$on实际是向Bus容器中添加一个事件监听器,当页面跳转时,原来的vue组件被注销,但是原来vue组件向Bus容器中添加的事件监听器并不会被移除。因此,当下次进入这个vue组件对应的页面时,执行到this.$root.Bus.$on时,又会向Bus容器中添加一个重复的事件监听器,以此类推,导致Bus容器中有很多个一模一样的事件监听器,从而导致事件只被触发一次,但是回调函数被执行多次的现象。
解决方案:
在vue组件的beforeDetory钩子函数中将本vue组件往Bus容器中添加的时间监听器全部手动移除。
//在vue对象的methods域中定义个函数专门移除事件监听器
offxxxListener: function () {
this.$root.Bus.off("事件名");
this.$root.Bus.off("事件名");
this.$root.Bus.off("事件名");
},
//在vue对象的beforeDestroy钩子中调用以上函数
beforeDestroy() {
this.offxxxListener();
},
更多推荐
已为社区贡献1条内容
所有评论(0)