在大部分場(chǎng)景下, 不推薦組件間采用 Event Bus 機(jī)制通信. 雖然, 總線機(jī)制最簡(jiǎn)單, 但長(zhǎng)期來看, 其維護(hù)成本更高. 可以采用下面的通信方式來替代總線機(jī)制:
- props / events 是父子通信的首選. 兄弟組件可以通過共同父親節(jié)點(diǎn)來通信.
- Provide / inject 可以讓長(zhǎng)距離跨組件通信.
- 利用 slots. 如果碰到中間組件不需要props, 但其上下游組件需要這些props時(shí), 你可能是組件劃分出現(xiàn)了問題. 這時(shí)候, 在中間組件上引入 slot, 讓父組件直接填充內(nèi)容, 這樣就不用跨中間組件傳遞props了.
- 使用全局狀態(tài)管理, 例如 Pinia.
總線使用方式
Vue 3 從 vue 實(shí)例中移除了總線相關(guān)事件, 只能通過第三方庫來實(shí)現(xiàn)總線機(jī)制. 例如 mitt 或者 tiny-emitter.
// eventBus.js
import emitter from 'tiny-emitter/instance'
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args)
}
