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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
iScroll.js 使用方法参考
May 16 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
layui实现动态和静态分页
Apr 28 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
jQuery实现图片切换效果
2020/10/19 jQuery
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python 字符串常用函数详解
2019/09/11 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
python实现网页录音效果
2020/10/26 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
骆驼官方商城:CAMEL
2016/11/22 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
高中毕业生自我鉴定例文
2013/12/29 职场文书
服务员岗位职责
2014/01/29 职场文书
给校长的建议书200字
2014/05/16 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
宾馆客房管理制度
2015/08/06 职场文书