事件匯流排 EventBus

2021-10-03 16:13:50 字數 764 閱讀 1165

在非父子元件需要進行通訊的時候,除了vuex之外,還有就是事件匯流排

eventbus 又稱為事件匯流排。在vue中可以使用 eventbus 來作為溝通橋梁的概念,就像是所有元件共用相同的事件中心,可以向該中心註冊傳送事件或接收事件,所以元件都可以上下平行地通知其他元件,但也就是太方便所以若使用不慎,就會造成難以維護的災難,因此才需要更完善的vuex作為狀態管理中心,將通知的概念上公升到共享狀態層次。

建立首先建立乙個js檔案

// event-bus.js

import vue from 'vue'

export const eventbus = new vue()

還有一種方式,可以直接在專案中的 main.js 初始化 eventbus :

// main.js

vue.prototype.$eventbus = new vue()

這種方式初始化的 eventbus 是乙個全域性的事件匯流排

其次,假設有兩個元件,第乙個可以傳送事件,

通過eventbus.$emit(channel: string, callback(payload1,…))傳送

第二個元件需要使用第乙個元件的方法或者資料,則通過**eventbus.$on(channel: string, callback(payload1,…))**監聽資料,

具體使用方法在後面持續更新

vue 事件匯流排 eventBus

父元件向子元件傳遞引數用v bind 子元件向父元件傳遞引數用this.emit 兄弟元件傳參eventbus或者是用vuex進行傳遞 下邊說說eventbus 首先在src的assets的目錄下新建乙個vue bus.js檔案 import vue from vue export default ...

Vue事件匯流排(EventBus)

參考 問題背景 vue中除父子元件通訊外,任意兩個元件間的通訊問題。解決方案 1.使用vuex,共享乙個狀態,通過修改和監聽這個狀態實現元件通訊。2.事件匯流排。思路 根據vue.js文件,vm.on vm.off都是其實例方法,因此我們需要乙個vue例項作為事件匯流排物件。使用方式 第一種 將事件...

EventBus 發布 訂閱事件匯流排

eventbus是一款針對android優化的發布 訂閱事件匯流排。執行緒之間傳遞訊息 1.開銷小,幾行 就可以實現。2.傳送者和接收者解耦。示例 1.先自定義乙個訊息傳輸類 public class msgtype 2.使用時進行註冊 eventbus.register this 3.傳送需要傳輸...