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使用prototype定义对象类型(转)[
Dec 22 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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代码保护--Zend Guard的使用详解
2013/06/03 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jQuery链使用指南
2015/01/20 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
python多线程http下载实现示例
2013/12/30 Python
Django自定义用户认证示例详解
2018/03/14 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
一年级小学生评语大全
2014/12/25 职场文书
安全保证书怎么写
2015/02/28 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
2016国培研修心得体会
2016/01/08 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
CSS基础详解
2021/10/16 HTML / CSS
python缺失值填充方法示例代码
2022/12/24 Python