【Vue】---- 手动封装on,emit,off
一、概念
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 }
转载于:https://www.cnblogs.com/pinkpinkc/p/10941703.html
【Vue】---- 手动封装on,emit,off相关推荐
- Vue手动封装实现一个五星评价得效果
我是歌谣 放弃很难 但是坚持一定很酷 微信公众号关注小歌谣 一起学习前后端知识 今天要说得是实现一个vue中实现五星评价得效果 简单来说 就是封装组件把 具体需要我们了解组件间得相互传值 数据绑定等知 ...
- vue手动封装分页组件
单独封装一个分页组件,进行全局注册,在需要使用的组件中进行引入,达到复用提高效率 1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)2. pageSize,每页显示多少 ...
- vue 组件封装 确认弹框带可以自定义titile ,内容,和取消,确定按钮的弹窗 slot插槽
一,子组件 modalConfirm.vue 文件封装 <template><div class="confirmBgc animations" :style=& ...
- 基于vue element 封装上传组件
基于vue element封装的上传组件 使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装 因为我暂时没用到其他的 哈哈哈) <template& ...
- Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索 一.Search 组件 二.使用案例 三.API 使用指南 四.源代码 一.Search 组件 组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
- Vue组件封装,(面试回答)
在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...
- Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换 一.Tab 切换组件 二.使用案例 三.API 使用指南 四.源代码 五.总结 一.Tab 切换组件 组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
- Vue组件封装的过程
Vue组件封装的过程 vue组件的定义 组件(Component)是Vue.js最强大的功能之一 组件可以扩展HTML元素,封装可重用代码 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...
- Vue 组件封装、组件传值、数据修改
Vue 组件封装 封装的意义 当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...
最新文章
- 经典题---数组改“貌”
- 网络推广计划浅析如何增加网站蜘蛛的爬取频次?
- [云炬创业基础笔记]第七张创业资源测试14
- OpenGL 混合Blending
- 【项目源码分享】基于C++实现的网店购物管理系统(VS2019控制台)
- 问题 1072: 汽水瓶
- VOIP,PSTN,ISDN
- Apache Kudu 加速对频繁更新数据的分析
- 快手用计算机说唱的叫什么,HIPHOP人物:“我们呢说唱,会在快手上爆炸!”
- 【Hive】Hive的数据类型
- 解决小键盘灯不亮的方法
- 什么是 Apache Shiro
- 内网工具 CS的基础使用
- 服务器显示日志已满,解决db2事务日志已满及日志磁盘空间已满问题办法详解
- c语言中ifelse意义,c语言if和else if的区别
- python用链表求两数之和_python 算法 - 008 计算两个链表所代表的整数之和 (整数相加法)...
- 无法识别服务器硬件信息,请教:无法获取服务器硬件信息
- Android 仿京东商品分类(简单实现 仅供参考)
- 基于android的旅游酒店管理
- signature=dd4c0ce5ed341fbfafa07eb3d3275ec3,SIGNATURE-FREE BUFFER OVERFLOW ATTACK BLOCKER
热门文章
- c++ 从double变为long int 数据丢失_面试官:Java 中有几种基本数据类型是什么?各自占用多少字节?...
- tcp滑动窗口_面试必备TCP(三):滑动窗口
- 金融数据分析与挖掘实战1.4.1-1.4.3
- 毕业不到一年的前端开发同学的焦虑
- 自学前端一般几年可以精通,找个差不多的工作?
- 7-4 sdut-运输计费问题 (10 分)python
- springboot 读写分离_springboot +ShardingJDBC 读写分离
- 计算机管理要继续请输入,若要继续,请键入管理员密码然后单击是问题解决方法...
- 软件质量保证计划_质量保证QA与质量控制QC
- mysql like html_mysql - MySQL RLIKE查找,然后替换打开和关闭HTML标记之间的所有字符 - 堆栈内存溢出...