Vue中的事件匯流排 bus

2022-02-14 03:51:21 字數 707 閱讀 5175

在vue中,我們父子之間通訊簡單明瞭:

父元件向子元件傳值: props,

在父元件中,用   :要傳遞過去的名字 = 「   要傳遞的值   」。

在子元件中 使用props:{}接受即可

子元件向父元件傳值:$emit. 通過自定義方法,

在子元件中,我們使用this.$emit('方法名',引數),向父元件傳值

在父元件中,我們使用子元件傳遞過來的自定義方法 :    @自定義方法名 = 「 自己隨便寫乙個方法名,不需要跟引數,在下面使用該方法時,再寫到()中 」

以上,是關於vue中父子元件通訊的方法,

那麼非父子元件之間的通訊,又是怎麼樣的呢?

其實也很簡單,有兩種方法:

1.通過vuex, vuex中的state.是可以共用的屬性。通過呼叫vue.state就可以獲取到,非父子元件之間通訊就可以解決

2.通過$bus, 事件匯流排

2.1 :  首先呢。我們需要去main.js 中  讓$bus可以使用: *****==》     vue.prototype.$bus = new vue()

2.2 :     然後,我們就可以使用 this.$bus.$emit(』事件名稱『,引數)  傳送

2.3 :     最後,我們可以通過 this.$bus.$on('事件名稱',function(引數){})  接收

這樣。我們就可以通過事件匯流排獲取到非父子元件通訊

Vue系列狀態管理篇 Bus事件匯流排篇

原理 建立乙個空的vue例項,來作為互動的中介 新建乙個資料夾bus,在資料夾中新建乙個檔案 bus.js 也可以不要 在檔案 bus.js 建立以下 import vue from vue const bus new vue export default bus 3.在 main.js 匯入 bu...

vue腳手架開發 事件匯流排 bus的妙用

在做上乙個專案中,遇到過這樣乙個問題 後端給的介面的資料中有公共資料,為了避免多次請求,前端避免不了的需要做資料儲存,而且如果是多次請求相同資料,前端頁面的效能也將大打折扣。為了解決這個問題,我 教了我一手,用 bus來儲存資料,把它當成是全域性的資料,然後就可以非常方便地拿到對應的值 在我的認知的...

元件refs和bus事件匯流排

refs 1.ref放到標籤上,拿到的是原生節點 2.ref放在元件上,拿到的是元件物件 bus事件匯流排 實現兄弟元件的通訊 1.建立 事件匯流排 2.乙個事件通過 emit觸發事件 3.乙個事件通過 on監聽事件 具體做法 1.新建立乙個 js 檔案,比如 event bus.js 2.在eve...