zoukankan      html  css  js  c++  java
  • 【孤独旅者】Vue-封装$on,$emit,$off

    let EventList = {
    //key:[]
    }

    const $on = (EventName, cb) => {
    if (!(EventList[EventName])) {
    EventList[EventName] = [];
    }
    EventList[EventName].push(cb);
    }
    /*
    $on:事件绑定
    $on(事件名称,回调函数)
    先判断当前事件名称是否存在,如果存在则直接将当前函数push到当前数组中去,如果不存在则创建一个数组,然后将当前函数push到数组中去
    */

    const $emit = (EventName, params) => {
    if (!EventList[EventName]) return;

    let EventLists = EventList[EventName];
    EventLists.map((cb) => {
    params ? cb(params) : cb(); //此句可有可无
    })
    }
    /*
    $emit:事件触发
    $emit(事件名称,params)触发事件的时候需要触发当前事件身上所以的函数

    1、判断当前当前事件名称是否存在,如果不存在则什么也不用干 直接return;
    2、如果存在的情况下,获取到当前事件名称所对应的所有函数,遍历执行
    3、如果第二次参数存在的情况下,调用函数的时候将第二个参数传递进去
    */

    const $off = (EventName, callback) => {
    if (EventList[EventName]) {
    let EventListsOff = EventList[EventName];
    if (cb) {
    EventList[EventName] = EventListsOff.filter((cb) => {
    return cb != callback;
    })
    } else {
    EventList[EventName].length = 0;
    }
    }
    }
    /*
    $off:事件解绑
    $off(事件名称,需要解绑的函数
    如果没有传递第二个参数则解绑所以事件
    如果传递了第二个参数则解绑指定函数
    1、首先判断当前事件名称是否存在,如果不存在 直接return
    2、如果事件名称存在,则判断第二值是否存在,如果存在则将这个函数从数组中移除,如果不存在直接将数组清空
    */

    export default {
    $on,
    $emit,
    $off
    }
  • 相关阅读:
    vue 重定向
    vue 通过插槽分发内容
    vue 表单输入绑定 checkbox
    jq enter键发送
    vue footer点击变色
    vue computed和methods 计算属性和侦听器
    实时监听input输入情况
    关于Input输入框蓝色外框的操作
    鼠标悬浮指针变手
    鼠标悬浮样式
  • 原文地址:https://www.cnblogs.com/jeremy94/p/10187909.html
Copyright © 2011-2022 走看看