vue原始碼之 eventBus原理

2021-10-10 19:35:02 字數 1631 閱讀 7524

vue中eventbus可以用來進行任何元件之間的通訊,我們可以把eventbus當成乙個管道,這個管道兩端可以接好多元件,兩端的任何乙個元件都可以進行通訊。其實這個管道就是vue例項,例項中的$on, $off, $emit方法來實現此功能。先通過簡單例子看看eventbus怎麼用。

"./vue.js"

>

<

/script>

>

1>

<

/child-comp-

1>

2>

<

/child-comp-

2>

<

/div>

var eventbus =

newvue()

; vue.

component

('child-comp-1',)

;}})

; vue.

component

('child-comp-2',}

);newvue()

;<

/script>

我們例項化了乙個vue例項,並賦值給了eventbus全域性變數。那麼我們就可以在任何地方使用這個全域性變數。接下來我們看看這個vue例項中的$on 和 $emit方法。

function

eventsmixin

(vue)

}else

}return vm

}; vue.prototype.

$once

=function

(event, fn)

on.fn = fn;

vm.$on(event, on)

;return vm

}; vue.prototype.

$off

=function

(event, fn)

// array of events

if(array.

isarray

(event)

)return vm

}// specific event

var cbs = vm._events[event];if

(!cbs)if(

!fn)

// specific handler

var cb;

var i = cbs.length;

while

(i--)}

return vm

}; vue.prototype.

$emit

=function

(event)

}return vm

};}

用 _events 儲存事件,在new vue()時,vue執行this._init方法進行一系列初始化操作,其中vue.js例項上建立乙個_events屬性:vm._events=object.create(null)

在移除***的時候,需要將使用者提供的***函式與列表中的***函式進行對比,相同部分會被移除,導致我們使用***注入到事件列表中時,***和使用者提供的函式不相同的,此時使用者使用vm.$off來移除***,移除操作會失敗。

解決方法:將使用者提供的原始***儲存在***的fn中 cb.fn === fn 比較。

VUE原始碼分析之eventBus原理

vue中eventbus可以用來進行任何元件之間的通訊,我們可以把eventbus當成乙個管道,這個管道兩端可以接好多元件,兩端的任何乙個元件都可以進行通訊。其實這個管道就是vue例項,例項中的 on,off,emit方法來實現此功能。還是老樣子,先通過簡單例子看看eventbus怎麼用。我們例項化...

EventBus分析原始碼

public static eventbus getdefault return defaultinstance 這裡是註冊訂閱者的地方,同樣的註冊方式有這麼 它們之間最主要的區別就是引數的不同。在實現上它們都是呼叫void register object subscriber,boolean st...

EventBus原始碼分析

前言 eventbus在現如今android專案中用來進行通訊使用很廣泛。在本篇文章中,我將會分為下面幾個模組來講解eventbus 如何使用,原始碼分析,使用注意事項,高階技能。除了上面說的幾個exception,如果我們重複呼叫register的話,會出現throw new eventbu ce...