vue通信方式EventBus的实现代码详解


Posted in Javascript onJune 10, 2019

vue通信方式有很多,项目中用的比较多的的有 pros、vuex、$emit/$on 这3种,还有 provide/inject (适合高阶组件)、 $attrs$listeners (适合高阶组件)以及 $parent/$child/refeventBus 等这3种方式。很多时候我们都是只会使用api,而懂得原理以及实现,但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的。所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下。这也是自己学到大佬的的东西后并在此记录(转载)一下。

class EventBus{
    constructor(){
      this.event=Object.create(null);
    };
    //注册事件
    on(name,fn){
      if(!this.event[name]){
        //一个事件可能有多个监听者
        this.event[name]=[];
      };
      this.event[name].push(fn);
    };
    //触发事件
    emit(name,...args){
      //给回调函数传参
      this.event[name]&&this.event[name].forEach(fn => {
        fn(...args)
      });
    };
    //只被触发一次的事件
    once(name,fn){
      //在这里同时完成了对该事件的注册、对该事件的触发,并在最后并取消该事件。
      const cb=(...args)=>{
        //触发
        fn.apply(this,args);
        //取消
        this.off(name,fn);
      };
      //监听
      this.on(name,cb);
    };
    //取消事件
    off(name,offcb){
      if(this.event[name]){
        let index=this.event[name].findIndex((fn)=>{
          return offcb===fn;
        })
        this.event[name].splice(index,1);
        if(!this.event[name].length){
          delete this.event[name];
        }
      }
    }
  }

以上代码用的是发布订阅模式。

总结

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

Javascript 相关文章推荐
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
Vue将页面导出为图片或者PDF
Aug 17 #Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
发布订阅模式在vue中的实际运用实例详解
Jun 09 #Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 #Javascript
解决vue单页面应用中动态修改title问题
Jun 09 #Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 #Javascript
详解Node.js异步处理的各种写法
Jun 09 #Javascript
You might like
php语言流程控制中的主动与被动
2012/11/05 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python计算回文数的方法
2015/03/11 Python
Python数据类型详解(一)字符串
2016/05/08 Python
python 读写中文json的实例详解
2017/10/29 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python中可以声明变量类型吗
2020/06/18 Python
Django封装交互接口代码
2020/07/12 Python
Python图像读写方法对比
2020/11/16 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
在校学生职业规划范文
2014/01/08 职场文书
中等生评语大全
2014/05/04 职场文书
质量月活动总结
2014/08/26 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
元宵节寄语大全
2015/02/27 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers
浅谈Redis的事件驱动模型
2022/05/30 Redis