vue通信方式有很多，項目中用的比較多的的有 pros、vuex、$emit/$on 這3種，還有 provide/inject (適合高階組件)、 $attrs和$listeners (適合高階組件)以及 $parent/$child/ref、eventBus 等這3種方式。很多時候我們都是只會使用api，而懂得原理以及實現(xiàn)，但我就覺得懂得原理以及實現(xiàn)跟一個只會調(diào)用api的開發(fā)人員時不在同一層次的。所以這里就像把跨組件通信的 eventBus 通信的原理給大家展示一下。這也是自己學到大佬的的東西后并在此記錄（轉(zhuǎn)載）一下。

class EventBus{    constructor(){      this.event=Object.create(null);    };    //注冊事件    on(name,fn){      if(!this.event[name]){        //一個事件可能有多個監(jiān)聽者        this.event[name]=[];      };      this.event[name].push(fn);    };    //觸發(fā)事件    emit(name,...args){      //給回調(diào)函數(shù)傳參      this.event[name]&&this.event[name].forEach(fn => {        fn(...args)      });    };    //只被觸發(fā)一次的事件    once(name,fn){      //在這里同時完成了對該事件的注冊、對該事件的觸發(fā)，并在最后并取消該事件。      const cb=(...args)=>{        //觸發(fā)        fn.apply(this,args);        //取消        this.off(name,fn);      };      //監(jiān)聽      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];        }      }    }  }

以上代碼用的是發(fā)布訂閱模式。

總結

以上所述是小編給大家介紹的vue通信方式EventBus的實現(xiàn)代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！