Vue兄弟元件通訊

2021-09-27 04:49:24 字數 692 閱讀 1209

vue兄弟元件通訊之借助**事件匯流排

其實要實現兄弟元件通訊,就算是通過父子元件通訊的方式也是可以達到的,如 子 ——>父——>子;

在這裡呢,就不對這種方式進行贅述,下面給大家介紹——借助**事件匯流排。

第一步:

在 元件資料夾中,建立乙個js檔案,這裡將其命名為「bus,js」,在裡面寫入如下**:

import vue from 'vue';

const bus = new vue();

export default bus;

第二步:

假如元件a.vue 和 元件b.vue是兄弟元件,那麼分別在兩個.vue檔案裡,引入bus.js,寫法如下:

import bus from './bus.js'
引入的具體路徑按照實際的專案寫,這裡bus.js是和.vue檔案同級。

第三步:

假如我們要實現a.vue傳值給b.vue,則在a.vue中,恰當的地方,比如某事件觸發後,或者mounted之類的生命週期中都行,寫入:

bus.$emit("事件名",要傳的資料);

第四步:

在b.vue的mounted中寫入:

bus.$on('事件名',res=>)

傳過來的資料可以是乙個變數,也可以是乙個物件、資料。

到此,通訊結束。

vue元件兄弟間通訊

借助於乙個公共的vue的例項物件,不同的元件可以通過該物件完成事件的繫結和觸發 var bus newvue bus.emit bus.on 熊大想要發訊息給熊二 接收方 熊二 事件繫結 bus.on customevent function msg 傳送方 熊大 觸發事件 bus.emit cus...

vue元件兄弟間通訊

四 兄弟元件間通訊 event 借助於乙個公共的vue的例項物件,不同的元件可以通過該物件完成事件的繫結和觸發 var bus new vue bus.emit bus.on 熊大想要發訊息給熊二,接收方 熊二 事件繫結 bus.on customevent function msg 傳送方 熊大 ...

vue之元件通訊方式 兄弟元件

今天回顧一下vue元件中兄弟元件如何實現通訊 在兄弟元件之間的通訊,可以採用關係鏈和ref鏈去使用,解決兄弟之間通訊問題。html布局 我是哥哥 打弟弟 我是弟弟 嗚嗚嗚嗚嗚嗚 js vue.component big brother vue.component littel brother new...