vue中使用window.eventBus事件重复触发的问题

vue中数据传输,会用到window.eventBus进行全局事件传递,emit和on全局事件的数据传递。但是如果使用不当,会造成事件重复触发。场景如下:

  1. 在main.js中,创建vue实例,并绑定到全局变量window.$bus上。
window.$bus = new Vue()
  1. 在a.vue中设置触发事件
window.$bus.$emit('user_task_change')

  1. 在b.vue中设置接收事件
window.$bus.$on('user_task_change', () => {
     console.log('事件触发')
    })
  1. 当我们重复进入并退出b.vue组件后(比如:此次是进入退出重复8次),再次进入a.vue触发 ‘user_task_change’事件,此时控制台会同时打印8个 ’事件触发’ 信息。
    在这里插入图片描述

导致该问题的原因:

是因为window.$bus 为全局变量,且事件触发机制on采用的是发布观察者模式,每次执行on函数是往事件队列中新增事件,而不是直接替换掉原有事件,所以当我们重复进入退出之后,事件队列的长度为8, emit该事件时则会遍历执行事件队列里的8个函数。

解决方案:

  1. window.$bus.$on 事件放在一个全局文件中,如main.js。必要的话可配合vuex使用。
  2. 如果在单个组件中使用,而且不需要重复触发的话,可以在绑定之前, 先使用 window.$bus.$off(‘user_task_change’) 清空事件队列, 在绑定事件。具体如下:
    window.$bus.$off('user_task_change') window.$bus.$on('user_task_change', () => {console.log('事件触发')})
发布了27 篇原创文章 · 获赞 4 · 访问量 6272

猜你喜欢

转载自blog.csdn.net/studentenglish/article/details/102569716