VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue通信方式EventBus的实现代码详解

    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的实现代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue采用EventBus实现跨组件通信及注意事项小结
    • vue2.0s中eventBus实现兄弟组件通信的示例代码
    • vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
    • vue2.0组件之间传值、通信的多种方式(干货)
    • Vue组件通信的四种方式汇总
    • 详解vue组件通信的三种方式
    • vue中eventbus被多次触发以及踩过的坑
    • 详解vue 组件之间使用eventbus传值

    广而告之:
    热门推荐:
    CSS代码使纯英文数字自动换行的简单实现

    当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行 并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识一下两位主角word-wrap和word-break word-wrap用来控制css换行···

    Vue Spa切换页面时更改标题的实例代码

    在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题';···

    JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支

    本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支。分享给大家供大家参考,具体如下: 页面加载事件的比较 window.onload jquery 中的 document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEven···

    PHP实现压缩图片尺寸并转为jpg格式的方法示例

    本文实例讲述了PHP实现压缩图片尺寸并转为jpg格式的方法。分享给大家供大家参考,具体如下: <?php function ImageToJPG($srcFile,$dstFile,$towidth,$toheight) { $quality=80; $data = @GetImageSize($srcFile); switch ($data['2']) { case 1: $im =···

    对象失去焦点时自己动提交数据的实现代码

    解决这个问题,得需要使用onblur来实现。下面代码并非是专案实现代码,只是模拟相同的功能。 复制代码 代码如下: <!--Ajax实现页面不闪烁,一直是Insus.NET所喜欢使用的--> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager&···

    微信小程序动态生成二维码的实现代码

    效果图如下: 实现 wxml <!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view> <!-- 画布,用来画二维码,只用来站位,不用来显示--> <view ···

    使用 vue 实现灭霸打响指英雄消失的效果附demo

    写在前面 灭霸打响指的消失效果。效果来源于 Google 搜索“灭霸” 或者 “thanos”。算是蹭热度的一个 Feature, 我通过 F12 试图去查看是如何实现的,也抠了一些音频、图片资源下来。后来在 github 上找到了一个现有的项目 Thanos_Dust, 所以参考了部分它的代码。 其实它的代码已···

    需要让用户

    、在证券公司的时候,因为设计的工作不忙,我一度论文撰写产品说明书的角色。那个时候总是想要很明白的给阅读者讲清楚“我们这个地方是怎么设计的,为什么要这么设计,背后的逻辑是什么”,然后再给他们示例“应该怎么怎么做”。一个产品说明书写下···

    PHP中异常处理的一些方法整理

    每一个新的功能添加到PHP运行时会创建一个指数随机数,通过这样的方式开发者可以使用和甚至滥用这个新特性。然而,直到一些好的和坏的使用情况陆续出现开发者们才达成了共识。当这些新案例不断浮现,我们终于可以辨别出什么是最好或最坏的做法。 异常处理在PHP中的确无论如何都···

    php入门学习知识点六 PHP文件的读写操作代码

    复制代码 代码如下: <?php //打开文件 $fp=fopen('tmp.html', 'r'); //读取文件内容 可以用以下两个函数进行操作 fread,file_get_contents $str=fread($fp, filesize('tmp.html')); //filesize为获取文件大小 $content=file_get_contents('tmp.html'); //写文件 $news···