vue3 跨页面、组件 通讯 —— mitt.js

mitt.jshttps://www.npmjs.com/package/mitt

安装：

npm install --save mitt

TS中使用：

utils\emitter.ts

import mitt, { type Emitter } from "mitt";
const emitter: Emitter = mitt();
export default emitter;

a.vue (缓存页面才会生效)

// 导入mitt
import emitter from "@/utils/emitter";
console.log("emitter", emitter);

onMounted(() => {
  // 监听订阅推送
  emitter.on("mitterPage", (e: number) => {
    console.log("订阅触发", e);
    pageValue.value = e;
  });
});

onBeforeUnmount(() => {
  // 移除订阅推送
  emitter.off("mitterPage");
});

b.vue

// 导入mitt
import emitter from "@/utils/emitter";

function onEdit(e: number) {
  // mitt推送让列表更新
  emitter.emit("mitterPage", e);
  router.go(-1);
}