vue中eventBus的使用

2022-06-21 16:48:14 字數 649 閱讀 1581

eventbus是用於元件間通訊的一種方法,我們都知道在vue中資料流是單向的,那麼非父子元件間的傳值自然值得我們注意

一種是我們都很熟悉的vuex;它可以通過倉庫溝通我們所有元件間的通訊;而另外還存在一種叫做eventbus的方法:

使用場景如:兄弟元件間的通訊,父元件fathercom中同時使用到childone和childtwo兩個兄弟元件,點選子元件childtwo需要另一子元件childone響應;

1.定義eventbus,建立eventbus.js檔案,掛載到vue例項上,暴露出去:  

import vue from 'vue';

let bus = new vue();

vue.prototype.$eventbus = bus;

export default bus;

2.使用到eventbus的兄弟元件都引入eventbus.js:

import eventbus from '../../utils/eventbus.js'

3.子元件childone宣告發布(宣告)事件,通常在mounted或created中宣告:

created() );

}4.子元件childtwo訂閱(觸發)事件:

methods:

}這就是乙個完整的eventbus通訊。

vue中EventBus的使用

第一步 建立乙個bus.js檔案,建立bus import vue from vue const bus new vue export default bus第二步 在需要互相通訊的元件中引入bus.js檔案 a b元件 import bus from utils bus.js 第三步 元件a中呼叫...

eventBus在vue中的使用

在vue專案中,父子元件間的通訊很方便。但兄弟元件或多層巢狀元件間的通訊,就會比較麻煩。這時,使用eventbus通訊,就可以很便捷的解決這個問題。eventbus可以在全域性定義,實現全專案通訊,使用方法也很簡單。1 初始化 全域性定義 全域性定義,可以將eventbus繫結到vue例項的原型上,...

Vue元件通訊中event bus的使用

1.建立乙個bus.js的資料夾,裡面 如下 import vue vue export defulat new vue 2.在傳遞元件中引入bus.js檔案並在相應的位置傳遞變數 import bus from bus.js 引數一 要傳遞的變數名 引數二 要傳遞的變數名所對應的值 bus.emi...