通过vue手动封装on、emit、off的代码详解


Posted in Javascript onMay 29, 2019

一、概念

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

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

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

事件触发时,会触发当前事件身上所有的函数

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

事件解绑时,若指定解绑函数则只解绑相应函数,否则解绑全部

二、手动封装on,emit,off事件在vue中的作用

|  在vue中进行非父子组件传值时,我们可以通过在vue的原型上添加一个公共的vue实例,组件之间调用这个公共实例的$on/$emit来传递数据,传递的一方调用$emit,接收的一方调用$on。

Vue.prototype.Observer = new Vue();  //实例化对象

|  这种方式能使所有对象拥有共同的on和emit,但是增加的属性所挂载的实例对象太大,就相当于你的一台法拉利的轮子坏了,你又买了一台新的法拉利并卸掉它的轮子,放到了原来的法拉利上,这十分耗费性能。因此,我们可以手动封装事件,来实现非父子传值。

import Observer from "./Observer"; //引入封装好的文件
Vue.prototype.Observer = Observer;  //将其添加到vue的原型上

三、封装on,emit,off事件

1. $on:创建一个事件仓库存放事件,判断事件名称是否存在。若不存在,初始化创建一个数组;若存在,将当前函数push到数组中。

const EventList = {}; //一个事件名称上面可能绑定多个函数,因此是一对多的模式,即观察者模式,数据类型采用对象
const on = function(eventName,callback){
  if(!EventList[eventName]){
    EventList[eventName] = [];
  }

  EventList[eventName].push(callback);
}

2. $emit:判断事件名称是否存在。若不存在,直接返回return;若存在,对当前事件名称所对应的所有函数进行遍历,并将参数传递过去。

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

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

3. $off:判断事件名称是否存在。若不存在,直接返回return;若存在,判断callback是否存在,如果存在则删除对应下标的的函数,如果不存在则将当前数组清空。

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] = [];
  }
}

4. 导出:便于在其他文件中调用。

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

总结

以上所述是小编给大家介绍的通过vue手动封装on、emit、off的代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
Javascript 读后台cookie代码
Sep 15 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
JSONP基础知识详解
Mar 19 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 #Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 #Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 #Javascript
vue-cli3中vue.config.js配置教程详解
May 29 #Javascript
详解vue-cli3开发Chrome插件实践
May 29 #Javascript
vue里的data要用return返回的原因浅析
May 28 #Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 #Javascript
You might like
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Python Flask框架扩展操作示例
2019/05/03 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
学术会议邀请函范文
2014/01/22 职场文书
决心书标准格式
2014/03/11 职场文书
小学生评语集锦
2014/04/18 职场文书
应聘英语教师求职信
2014/04/24 职场文书
2014离婚协议书范文
2014/09/10 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
党建工作汇报材料
2014/12/24 职场文书
四年级数学教学反思
2016/02/16 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS