在Vue应用中,使用EventBus全局事件总线的2个问题,求高手解答

104828720
  • 1.4k

问题

1、使用全局事件总线(EventBus)进行组件间通信时,由于项目多人协助开发,会产生自定义事件名命名冲突问题,请问有什么优雅的解决方案?

2、当同一个组件在同一个界面被多次复用,那该组件上使用$on监听自定义事件就会重复注册同一个事件问题,请问如何解决?

求大神指明思路,我想了很久,也百度谷歌了都未能解决

回复
阅读 754
4 个回答
  1. 事件名可以遵循一定的规范,比如加个前缀什么的,可以避免很多的冲突了,要想完全无冲突,还可以加一个随机字符串的后缀
  2. 单例模式应该可以解决

可以自已重写一个 $on 方法,然后在执行时先进行一次校验

const eventBus = new Vue()
const origin = eventBus.$on
eventBus.$on = function(eventName, ...args) {
  // 在这里执行你想要的逻辑
  origin.call(this, eventName, ...args)
}

问题一:
创建一个生成唯一 id 的 generator 函数 genEventName,使用事件的几个模块引入同一个常量配置文件,配置文件 export 的事件名通过 genEventName() 生成(每次调用都是生成不同的 id)。


问题二:
每个 .vue 文件其实是一个模块,模块内定义一个单例的函数,将这个函数提供给 Vue 组件调用。

<script>
const bindEventOnce = (() => {
  let isCalled = false;
  
  return (vm) => {
    if (isCalled) {
      return;
    }

    isCalled = true;
    vm.$on(/* ... */);
  };
})();

export default {
  created() {
    bindEventOnce(this, /* ... */);
  }
}
</script>
  1. 我的方案是采用类似目录路径的命名规范:

    bus.on('/global/set/storage');

    只要设计得当并且谨遵规范,那么相同的命名应该是指向同一个事件的,不会冲突,反而形成一种“默契”,当你要订阅一个什么事件的时候,不用查找发布方的信息,根据规则写就可以了。

  2. 这个问题并不存在,组件每使用一次就初始化一个实例,各个实例的 $on 互不干扰。
宣传栏