vue3的兄弟组件通信

1、自定义全局事件总线

1、主文件定义

//对象的类型限制
type BusClass = {
    emit:(name:string,value:any)=>void
    on:(name:string,callback:Function)=>void
}

//事件名的类型限制
type list = string | number | symbol

//事件对象
type List = {
    [key:list]:Array<Function>
}

class Bus implements BusClass  {
    list:List
    constructor(){
}
    emit(name:string,value?:any):void{
        if(!this.list[name])return
        let eventArray:Array<Function>  = this.list[name]
    	eventArray.forEach(fn=>{
            fn.call(this,value)
        })
}
    on(name:string,callback:Function):void{
        let fn:Array<Function> = this.list[name] || []
		fn.push(callback)
		this.list[name] = fn
    }
}


export default  new Bus()


2、子组件定义
	//B组件中触发
	import Bus from "./bus"
	let flag = ref(false)
	const  emitA = ()=>{
        Bus.emit("on-click",flag)
    }
    //A组件中监听
    import Bus from "./bus"
	onMounted(()=>{
        Bus.on('on-click',(value:Boolean)=>{
            console.log(value)
        })
    })
    

2、使用mitt实行兄弟组件通信

1、安装库
	npm install mitt -S
2、使用库
	//main.js
	import mitt from "mitt"
	let Mit = mitt()
    
    //文件申明
    declarev module "@/vue-core"{
        export interface ComponentCustomProperties{
            $Bus:typeof Mit
        }
    }
    
  app.config.globalProperties.$Bus = Mit //挂载全局

3、A组件中使用
	import {getCurrentInstance} from "vue"
	let instance = getCurrentInstance()
	const emit = ()=>{
        instance?.proxy?.$Bus.emit("on-click",2)
    }
4、组件中接收
	import {getCurrentInstance} from "vue"
	let instance = getCurrentInstance()
    
	let onEmit =(value:string)=>{console.log(value)})
    
    onMount(
        instance?.proxy?.$Bus.on("on-click",onEmit)
        
        instance?.proxy?.$Bus.off("on-click",onEmit)
    )