溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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的實現代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
