安装mitt

"mitt": "^3.0.1",

bus.js

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

a.vue

<template>
  <el-button @click="test">bus</el-button>
</template>
<script setup>
import Bus from "@/bus";
import { onMounted, ref, onBeforeUnmount, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const a = ref("我是test页面的值");
function test() {
  Bus.emit("changeMsg", a.value);
  router.push("/bus-b");
}
onBeforeUnmount(() => {
  Bus.emit("changeMsg", a.value);
});
onUnmounted(() => {
  Bus.emit("changeMsg", a.value);
});
</script>

b.vue

<template>
  <div>{{ msg }}</div>
</template>
<script setup>
import Bus from "@/bus";
import { ref, onBeforeUnmount } from "vue";
const msg = ref("");
console.log(
  Bus.on("changeMsg", () => {
    sayHi();
  })
);
function sayHi() {
  msg.value = "hi";
}
onBeforeUnmount(() => {
  Bus.emit("changeMsg", sayHi);
});
</script>

封装的event bus最优使用场景
1、非父子组件之间的通信：
如果需要在非父子关系的组件之间进行通信，可以使用自己封装的 Event Bus 实现跨级通信。

2、多个兄弟组件之间的通信：
如果需要多个兄弟组件之间相互通信，则可以使用自己封装的 Event Bus 来实现。

3、全局事件监听：
如果需要在任何地方都能监听到某个事件并做出响应，则可以使用自己封装的全局事件总线来实现。