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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
Js 随机数产生6位数字
May 13 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
JS 控件事件小结
Oct 31 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
监听element-ui table滚动事件的方法
Mar 26 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
一次编写,随处运行
2006/10/09 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python编码爬坑指南(必看)
2016/06/10 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
windows下python安装pip方法详解
2020/02/10 Python
Python多线程thread及模块使用实例
2020/04/28 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
仓管岗位职责范本
2014/02/08 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
订货会邀请函
2015/01/31 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers