vue----自己封装组件，非父子组件传值$on,$emit,$off

 

采用观察者模式

 

  $on   $off  $emit

 

     $on：绑定事件

绑定事件，一个事件名称上面可能绑定多个函数

 $on("事件名称",回调函数)

事件名称与函数之间的关系：key:[]

  $emit：触发事件

触发事件时，需要触发当前事件身上所有的函数

$emit("事件名称",[需要传递的值])

  $off：解绑事件    

 $off("事件名称")  解绑全部函数

 $off("事件名称",需要解绑的函数)

    如果没有传递第二个参数，则解绑所有的事件对应的函数
    如果传递了第二个参数，则解绑指定的函数

业务逻辑

$on:
1.首先判断当前事件名称是否存在，
    如果事件名称存在，则直接将当前函数push到当前数组中去
    如果事件名称不存在，则创建一个数组，再将当前函数push到数组中
    
$emit: 
1.判断当前事件名称是否存在，
        如果不存在，则什么都不干，直接return
        如果存在，则获取当前事件名称所对应的所有函数，遍历执行
2.如果第二个参数存在，调用函数时，将第二个参数传递进去
 
$off:
1.首先判断当前事件名称是否存在
    如果不存在，直接return
    如果存在，则判断第二个参数是否存在
        如果存在，则将这个函数从数组中移除
        如果不存在，则直接将数组清空

代码实现observer.js

let EventList = {
　　//事件名称与事件函数的关系key:[]
   //key:[]
}


const $on = (EventName,cb)=>{
　　//判断事件名称是否存在
    if(!(EventList[EventName])){
　　　　//事件名称不存在，则创建数组
        EventList[EventName] = [];
    }
　　//将事件名称对应的函数push到数组中
    EventList[EventName].push(cb);
}


const $emit = (EeventName,params)=>{
　　//判断事件名称是否存在，不存在，直接return
    if(!EventList[EeventName])return;
　　//事件名称存在，获取当前事件名称对应的所有函数，遍历执行
    let EventLists = EventList[EeventName];
　　//遍历事件名称所对应的函数
    EventLists.map((cb)=>{
　　　　//判断是否传值，执行对应的函数
        params?cb(params):cb();
    })
}

const $off = (EventName,callback)=>{
　　//判断事件名称是否存在，若存在
   if(EventList[EventName]){
       let EventListsOff = EventList[EventName];
　　　　//判断第二个参数是否存在，如果存在
       if(callback){
　　　　　　　　//将其从数组中移除
            EventList[EventName] =  EventListsOff.filter((cb)=>{
                return cb != callback;
            })
       }else{
　　　　　　　　//第二个参数不存在，直接将数组清空
            EventList[EventName].length = 0;
       }
   }
}


export default {
    $on,
    $emit,
    $off
}

 

 

转载于:https://www.cnblogs.com/SRH151219/p/10395984.html