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

  • Z时代
  • 2024-02-26
  • 分类：IT

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

问题

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

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

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

回答：

  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 互不干扰。

以上是 在Vue应用中，使用EventBus全局事件总线的2个问题，求高手解答 的全部内容， 来源链接： utcz.com/p/936110.html

回到顶部