Vue-封装-$on $emit $off（封装事件订阅）

最新推荐文章于 2025-03-09 12:59:11 发布

joker.ma

最新推荐文章于 2025-03-09 12:59:11 发布

阅读量1.2k

点赞数

分类专栏：案例文章标签： Vue $on $emit $off

本文链接：https://blog.youkuaiyun.com/qq_45092792/article/details/97243921

版权

案例专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中封装和使用$on、$emit和$off事件管理方法，提升组件间的通信效率。通过自定义事件中心，实现事件订阅、发布和取消订阅，帮助开发者更好地控制组件间的交互和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
    事件池
    eventList = {
         handle:[fn1,fn2,fn3]
         abc:[fn1,fn2,fn3]
    }
    ||
    eventList = {
      
    }

    $on(eventName,callback)
    判断当前事件名称是否存在，如果不存在则创建一个key值为事件名称  value为一个数组
    将callback push到数组中

    如果事件名称存在则直接添加到数组中去


    $emit(eventName,[params])

    判断当前事件名称是否存在，如果存在则遍历数组，得到所有的函数，并执行。然后将params当做实参传递到函数中去


    $off(eventName,[callback])


    判断当前事件名称是否存在，如果存在继续判断第二个参数是否存在，如果存在则找到相对于的下标 然后将函数在数组中移除
    如果不存在则将整个数组清空
*/

const eventList = {}


const $on = (eventName,callback)=>{
    if(!eventList[eventName]){
        eventList[eventName] = [];
    }
    eventList[eventName].push(callback)
}



const $emit = (eventName,params)=>{
    if(eventList[eventName]){
        let arr = eventList[eventName];
        arr.map((cb)=>{
            cb(params);
        })
    }

}

const $off = (eventName,callback)=>{
    if(eventList[eventName]){
        if(callback){
            let index = eventList[eventName].indexOf(callback);
            eventList[eventName].splice(index,1);
        }else{
            eventList[eventName].length = 0;
        }
    }
}

// 测试

function fn1(val){
    console.log(111,val)
}

function fn2(val){
    console.log(222,val)
}

function fn3(val) { 
    console.log(333,val)
 }



 $on("handle",fn1)
 $on("handle",fn2)
 $on("handle",fn3)
 $off("handle",fn1)
 $emit("handle","abc")