vue3中（兄弟父子传参）Bus详解和使用Mitt

两种方案

一、简易版手写发布订阅模式
1.代码（新建一个bus.ts文件）

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

应用：

import {ref} from 'vue'
import Bus from './bus'
const userName = '张三'
// 兄弟组件 发送数据
Bus.emit('userName',userName)

// 兄弟组件 接收数据
Bus.on('userName', (userName:string) => {
    console.log(userName)
})

二、应用Mitt
1.在vue3中$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus，对于这种情况我们可以使用Mitt库（其实就是我们视频中讲的发布订阅模式的设计）
1.安装

npm install mitt -S

2.main.ts 初始化
全局总线，vue 入口文件 main.js 中挂载全局属性

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
 
const Mit = mitt()
 
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}
 
const app = createApp(App)
 
//Vue3挂载全局API
app.config.globalProperties.$Bus = Mit
 
app.mount('#app')

3.应用
A 组件派发(emit)

<template>
    <div>
        <h1>我是A</h1>
        <button @click="emit1">emit1</button>
        <button @click="emit2">emit2</button>
    </div>
</template>
 
<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const emit1 = () => {
    instance?.proxy?.$Bus.emit('on-num', 100)
}
const emit2 = () => {
    instance?.proxy?.$Bus.emit('on-num1', 500)
}
</script>
 
<style>
</style>

B组件监听(on)

<template>
    <div>
        <h1>我是B</h1>
    </div>
</template>
 
<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
// 第一种写法
//instance?.proxy?.$Bus.on('on-num', (num) => {
    //console.log(num,'===========>B')
//})
// 监听多条
instance?.proxy?.$Bus.on('*',(type,str)=>{
console.log(type,str)
})
// 删除
const Bus=(str:any)=>{
	console.log(srt)
}
instance?.proxy?.$Bus.on('on-num', Bus)
// off（取消置顶的mitt时间，取消的函数）
// 删除指定的一条一处监听事件(off)
instance?.proxy?.$Bus.off('on-num', Bus)
// 删除全部 清空所有监听(clear)
instance?.proxy?.$Bus.all.clear()
</script>
 
<style>
</style>

监听所有事件（ on("*") ）

instance?.proxy?.$Bus.on('*',(type,num)=>{
    console.log(type,num,'===========>B')
})

移除监听事件（off）

const Fn = (num: any) => {
    console.log(num, '===========>B')
}
instance?.proxy?.$Bus.on('on-num',Fn)//监听
instance?.proxy?.$Bus.off('on-num',Fn)//移除指定事件

清空所有监听（clear）

instance?.proxy?.$Bus.all.clear()