Vue傳值 bus匯流排機制

2021-10-01 07:18:29 字數 734 閱讀 3896

眾所周知,vue提供了很多套元件間傳值的方法,父子元件直接用props和$emit就好,大型專案則用vuex,但有一種更適合在小專案中使用的非父子元件傳值方法,即bus匯流排機制。它的用法的實現原理是前端面試中常考的。在第一次換工作的時候,幾乎所有面試官都問了有關vue元件傳值的幾種方法,所以掌握這個知識點是很重要的。

這種方法的原理是通過乙個空的vue例項作為**事件匯流排,通過它來觸發事件和監聽事件,可以實現幾乎任何元件間的通訊,這在一些比較小的專案中是非常好用的,當然如果是簡單的小專案,你也可以使用$root(但我堅決不支援這樣使用,可以在面試時炫技)。接下來我們來看看在專案中的實戰:

在utils資料夾下面定義乙個bus.js,這樣乙個**事件匯流排就定好了,裡面內容就這兩行:

import vue from 'vue'

export const event = new vue() // 定義乙個事件匯流排

傳遞方:

import  from '../../utils/bus'  // 引入這個事件匯流排

export default

watch:

}

接收方:

import  from '../../utils/bus' // 依然是把bus匯流排引進來

export default )

}}

這個方法聽起來挺唬人的,但實際操作就是這麼簡單。

vue基礎之事件匯流排bus(非父子元件傳值通訊)

事件匯流排其實就是一種非父子關係的通訊方式 1 給vue的原型上掛載乙個vue例項 vue.prototype.bus newvue 2 傳送事件,傳送資料 this.bus.emit 事件名 資料 3 監聽事件,獲取資料 this.bus.on 事件名 資料 doctype html utf 8 ...

vue專案裡使用bus傳值

首先建立乙個bus.js的檔案,在此檔案裡操作 import vue from vue const bus new vue export default bus 然後在main.js檔案裡匯入 import eventbus from bus.js vue.use eventbus vue.prot...

vue 兄弟元件之間傳值之bus

有時候兩個元件也需要通訊 非父子關係 當然vue2.0提供了vuex,但在簡單的場景下,可以使用乙個空的vue例項作為 事件匯流排。參考 例子 div id c1 c1 c2 c2 div var bus new vue 為了方便將bus 空vue 定義在乙個元件中,在實際的運用中一般會新建一bus...