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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 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支持页面回退的两种方法[转]
2007/02/14 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python中is与==判断的区别
2017/03/28 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
学习python分支结构
2019/05/17 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
小区门卫工作职责
2013/12/14 职场文书
学校标语口号大全
2015/12/26 职场文书
导游词之无锡唐城
2019/12/12 职场文书
编写python程序的90条建议
2021/04/14 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript