vue封装 $on、$emit、$off
1.$on 事件的订阅
$on(eventName,callback) 参数1:事件名称 参数2:事件函数 判断当前事件名称是否存在,如果不存在则创建一个key值为事件名称 value为一个数组 将callback push到数组中 const eventList = {}; const $on = (eventName,callback)=>{ if(!eventList[eventName]){ eventList[eventName] = []; } eventList[eventName].push(callback) }
2.$emit 事件的触发
$emit(eventName,[params]) 参数1:事件名称 参数2:[需要传递的参数] 判断当前事件的名称是否存在,如果存在则遍历数组,得到所有的函数,并执行。然后将params当做实参传递到函数中去 const eventList = {}; const $emit = (eventName,params)=>{ if(eventList[eventName]){ let arr = eventList[eventName]; arr.map((cb)=>{ cb(params) }) } }
3.$off 事件的解绑
$off(eventName,[callback]) 参数1:事件名称 参数2:[事件函数] 判断当前事件名称是否存在,如果存在继续判断第二个参数是否存在,如果存在则找到相对应的下标 然后将函数在数组中移除 如果不存在则将整个数组清空 const eventList = {}; 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; } } export default = { $on, $emit, $off }