• 手动封装on,emit,off


    接上一条的Vue的几种传值方式中的非父子的实现原理

    on 绑定

    emit 触发

    off 解绑


    //存放事件
    eventList = {
    key:val
    handle:[]
    }

    1对多
    on(eventName,callback);
    handle:-------N多个
    1、判断事件名称是否存在

    2、如果存在的情况下将cb存放在eventName这个数组当中

    3、如果不存在创建key值为eventName val值为数组

    1对多
    emit(eventName,params);

    当调用emit的时候获取到eventName这的值,对值判断,如果值不存在直接return
    如果存在遍历这个值全局进行调用,然后将params传入这些函数


    off(eventName,[callback])
    当调用off的时候获取到eventName这的值,对值判断,如果值不存在直接return
    如果存在判断callback是否存在 如果存在删除指定的函数
    如果不存在将当前数组清空


    */

    const EventList = {

    }


    const on = function(eventName,callback){
    if(!EventList[eventName]){
    EventList[eventName] = [];
    }

    EventList[eventName].push(callback);
    }


    const emit = function(eventName,params){
    if(!EventList[eventName])return;

    EventList[eventName].map((cb)=>{
    cb(params)
    })
    }


    const off = function(eventName,callback){
    if(!EventList[eventName])return;

    if(callback){
    let index = EventList[eventName].indexOf(callback);
    EventList[eventName].splice(index,1);
    }else{
    EventList[eventName] = [];
    }
    }

    将其暴露出去方便引用

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

  • 相关阅读:
    wingIDE Pro6 破解教程
    C++中的访问权限
    解决wine中文字体方块或乱码
    linux下目录的作用
    linux下查看系统信息
    Windows Eclipse Maven 安装
    Centos SVN 搭建
    Mysql MyISAM 与 InnoDB 效率
    Linux删除除指定后缀外的所有文件
    mysql 多个timestamp设置自动更新 错误:there can be only one TIMESTAMP column with CURRENT_TIMESTAMP
  • 原文地址:https://www.cnblogs.com/qhya/p/10596025.html
Copyright © 2020-2023  润新知