Vue中使用EventBus進行元件通訊

vue中的eventbus類似與js原生的事件，即customevent事件，該事件主要是用於dom之間的互相通訊，而eventbus則不同，eventbus主要用於元件之間的通訊，該方法應用於兄弟元件之間通訊偏多，但是，該方法也可以應用於父子之間的相互通訊。

這裡我以腳手架3.0為樣例進行講解接下來要使用的方法。

建立eventbus可以通過以下兩種方法:

1) 在main.js中直接建立以下語句

window.eventbus=new vue();

2）建立bug.js檔案，在裡面填入以下內容

import vue from 'vue'

const eventbus=new vue();
export default eventbus;

在子->父通訊的時候，我們用到了$emit，在使用eventbus的時候，也需要用到它，如

eventbus.$emit('on-add',)

eventbus.$on('on-add',event=>this.number++)

個人感覺:雖說eventbus在元件之間用起來非常簡單方便，但是，如果在元件多了之後，用了大量的eventbus之後，並不是那麼的容易維護。還有一點，就是事件很難快速跟蹤，在元件中放置了大量的emit和on的觸發器和***可能會造成一定的後果，所以在進行兄弟元件之間共享資料的時候，可以考慮使用vuex來進行狀態管理。

vue 中使用 eventBus兄弟元件傳資料

vue 中使用 eventbus 場景 需要兄弟元件傳資料 import vue from vue export default newvue import bus from utils eventbus eventbus.emit getparams data created 出現異常 conso...

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中呼叫...

vue中eventBus的使用

eventbus是用於元件間通訊的一種方法，我們都知道在vue中資料流是單向的，那麼非父子元件間的傳值自然值得我們注意 一種是我們都很熟悉的vuex 它可以通過倉庫溝通我們所有元件間的通訊 而另外還存在一種叫做eventbus的方法 使用場景如 兄弟元件間的通訊，父元件fathercom中同時使用到...