Bus.ts

 
type BusClass = {
    emit: (name: string) => void
    on: (name: string, callback: Function) => void
}
type BusParams = string | number | symbol 
type List = {
    [key: BusParams]: Array<Function>
}
class Bus  implements BusClass {
    list: List
    constructor() {
        this.list = {}
    }
    emit(name: string, ...args: Array<any>) {
        let eventName: Array<Function> = this.list[name]
        eventName.forEach(ev => {
            ev.apply(this, args)
        })
    }
    on(name: string, callback: Function) {
        let fn: Array<Function> = this.list[name] || [];
        fn.push(callback)
        this.list[name] = fn
    }
}
 
export default new Bus()

使用a组件

<template>
  <h1>A.vue</h1>
  <hr />
  <button @click="change">传递</button>
  <div class="box"></div>
</template>

<script lang="ts" setup>
import Bus from '../Bus'
let flag=true
const change=()=>{
  flag=!flag
  Bus.emit('son-click',flag)
}
</script>
<style>
.box {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
</style>

b组件

<template>
  <h1>B.vue</h1>
  <hr />
  <div class="box">{{flag}}</div>
</template>

<script lang="ts" setup>
import Bus from '../Bus'
import {ref} from 'vue'
let flag =ref(true)
Bus.on("son-click",(value:boolean)=>{
  flag.value = value
})
</script>
<style>
.box {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
</style>