前端菜鸡流水账日记 -- 事件总线的用法

我又又又来了，这次介绍的是工作中遇到的事件总线，也是第一次使用，本来以为会很难，但是其实也很方便上手的，下边来详细看看吧

首先要使用，肯定要先导入

import emitter from "@/utils/bus";

使用的话就是直接emmiter.emit（‘自定义名字’，要传递的参数信息），这是在传递的页面，可以看作是父页面，同等效果

// 发送自定义事件，携带oneTime和twoTime作为参数
  await emitter.emit("timeSelected", { oneTime, twoTime });
  // allTime.value = time;
  scTime.value = time;

  if (szVlaue.value && allTime.value) {
    emitter.emit("seleSeach", szVlaue.value);
  }
  if (scTime.value) {
    emitter.emit("seleSeach", szVlaue.value);
  }

在要接受的页面，可以看作是子页面，进行emitter.on进行接受，定义的变量名字是一样的，然后再用value拿到传入的值，进行一些其他的操作，实现想要的效果

emitter.on("seleSeach", (value) => {
    seachP.value.name = value;
}

关于@utils/bus的内容

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

事件总线的好处就在于，可以跨好多个页面进行传值，只要是变量名对应就可以，没有父传子之类的这种限制，但是也不建议用太多，可能会造成其他的问题，不管是那种方式，都要正常适量的使用最好，这就是我用到的事件总线啦