vue+ts自定义 Eventbus（observer）

在 Vue，我们经常遇到跨组件事件监听和触发的使用场景，通常我们会使用三方库，如 Eventbus等，但是不要过于依赖三方库，这类小功能我们完全可以自定义。

一、创建 observer.ts 文件

const eventList = {};

const $on = function (eventName, callback) {
  if (!eventList[eventName]) {
    eventList[eventName] = [];
  }
  eventList[eventName].push(callback);
};

const $off = function (eventName, callback) {
  if (eventList[eventName]) {
    if (callback) {
      const index = eventList[eventName].indexOf(callback);
      eventList[eventName].splice(index, 1);
    } else {
      eventList[eventName].length = 0;
    }
  }
};

const $emit = function (eventName, ...params) {
  if (eventList[eventName]) {
    const fnArr = eventList[eventName];
    fnArr.forEach((callback) => {
      callback(...params);
    });
  }
};

export default {
  $on,
  $emit,
  $off,
};

三、使用

如果项目中多个页面都会用到，可以将toast对象挂载全局使用，在vue3中可以这样挂载。

import observer from "./common/utils/observer";

const app = createApp(App);
app.config.globalProperties.$observer = observer;
app.mount("#app");

然后在我们就可以在任意组件中这样使用了

this.$observer.$emit("xxx", 参数);

this.$observer.$on("xxx", () => {
    console.log('监听到了')
});

this.$observer.$off("xxx");

如果我们在项目中使用，使用了ts语法严格检查，这里也贴下我对应的observer.ts 的实现：

interface SimpleKeyValueObject {
  [key: string]: any;
}

const eventList: SimpleKeyValueObject = {};

const $on = (eventName: string, callback: any) => {
  if (!eventList[eventName]) {
    eventList[eventName] = [];
  }
  eventList[eventName].push(callback);
};

const $off = (eventName: string, callback: any) => {
  if (eventList[eventName]) {
    if (callback) {
      const index = eventList[eventName].indexOf(callback);
      eventList[eventName].splice(index, 1);
    } else {
      eventList[eventName].length = 0;
    }
  }
};

const $emit = (eventName: string, ...params: any[]) => {
  if (eventList[eventName]) {
    const fnArr = eventList[eventName];
    fnArr.forEach((callback: any) => {
      callback(...params);
    });
  }
};

export default {
  $on,
  $off,
  $emit,
};