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...