Vue3兄弟组件互相传参 bus

最新推荐文章于 2024-08-15 10:31:28 发布

波子的搬砖生涯

最新推荐文章于 2024-08-15 10:31:28 发布

阅读量406

点赞数

分类专栏： Vue3 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43208652/article/details/129376471

版权

Vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了一个名为Bus的TypeScript类，该类实现了事件发布和订阅功能。通过定义类型BusClass，设定了emit方法用于发布事件，on方法用于订阅事件。类内部维护了一个事件列表list，用于存储不同事件名及其对应的回调函数数组。在emit方法中，遍历并执行对应事件的所有回调函数，而在on方法中，添加新的回调到事件列表。文章最后展示了如何导出和使用这个Bus实例进行事件的发布和订阅。

摘要由CSDN通过智能技术生成

创建bus.ts

// 先定义一个类型，emit作为发布(传递)，on作为订阅(接收)
// name是事件名称，callback是一个回调函数
type BusClass = {
    emit:(name:string) => void
    on:(name:string, callback:Function) => void
}
// 定义多种参数类型
type PramsKey = string | number | symbol
// 定义一个调用中心,可以接收多个参数
type List = {
   [key:PramsKey]: Array<Function>
}
class Bus implements BusClass {
    list: List
    constructor (){
        // 初始化list
        this.list = {}   
    }
    // 发布事件,...args解构多个参数
    emit (name:string,...args:Array<any>){
        // 获取到list里的数据
        let evnentName:Array<Function> = this.list[name]
        evnentName.forEach(fn =>{
            fn.apply(this, args)
        })
    }
    // 接收事件
    on (name:string, callback:Function){
        // 如果是第一次注册，则为空；如果被多次注册，则采用之前注册的名字
        let fn:Array<Function> = this.list[name] || []
        fn.push(callback)
        this.list[name] = fn
    }
}
// 导出bus
export default new Bus()

// 发布事件 Bus.emit
// 接收事件 Bus.on
在这里插入图片描述