通过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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
Angular的事件和表单详解
Dec 26 Javascript
js实现简单的计算器功能
Jan 16 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
Vue头像处理方案小结
Jul 26 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
小程序关于请求同步的总结
May 05 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.MVC的模板标签系统(二)
2006/09/05 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
销售业务员岗位职责
2014/01/29 职场文书
工程专业应届生求职信
2014/02/19 职场文书
体育教师求职信
2014/06/30 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
村委会贫困证明范本
2014/09/17 职场文书
实习指导老师意见
2015/06/04 职场文书
医院保洁员管理制度
2015/08/05 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python