vue通信方式EventBus的实现代码详解
2019-06-10 08:51
627 查看
vue通信方式有很多,项目中用的比较多的的有 pros、vuex、$emit/$on 这3种,还有 provide/inject (适合高阶组件)、 $attrs
和$listeners
(适合高阶组件)以及 $parent/$child/ref
、eventBus
等这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的实现代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- Windows Phone代码与Unity相互通信(事件方式)实现详解
- 如何实现Windows Phone代码与Unity相互通信(事件方式)
- 详解vue组件通信的三种方式
- xml文件解析方式详解、 pull方式解析xml文件实现代码
- 详解VUE 定义全局变量的几种实现方式
- 详解Vue组件之间通信的七种方式
- vue2.0s中eventBus实现兄弟组件通信的示例代码
- 详解vue中的组件通信的几种方式(一)
- vue实现绑定事件的方法实例代码详解
- 详解多线程的两种实现方式以及4个线程,两个线程对j加1,两个线程对j减1完整代码。
- vue子父组件通信的实现代码
- 线程之间进程之间的通信方式及其代码实现
- C++ 多线程通信方式简介并结合生产者-消费者模式代码实现
- vue采用EventBus实现跨组件通信及注意事项小结
- 小白都能看懂的vue中各种通信传值方式,附带详细代码
- 如何实现Windows Phone代码与Unity相互通信(插件方式)
- linux多线程编程详解教程(线程通过信号量实现通信代码)
- 如何实现Windows Phone代码与Unity相互通信(事件方式)
- 如何实现Windows Phone代码与Unity相互通信(插件方式)
- [置顶]xml文件解析方式详解、 pull方式解析xml文件实现代码