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的實現代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
