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...