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

vue封装 $on、$emit、$off

1.$on 事件的订阅

1 2 3 4 5 6 7 8 9 10 11

$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 事件的触发

1 2 3 4 5 6 7 8 9 10 11 12

$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 事件的解绑

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$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  }