vue2 0s中eventBus實現兄弟元件通訊

2022-04-28 10:46:14 字數 1536 閱讀 7388

在vue1.0中,元件之間的通訊主要通過vm.$dispatch沿著父鏈向上傳播和用vm.$broadcast向下廣播來實現。然而在vue2.0中,已經廢除了這種用法。

vuex加入後,對元件之間的通訊有了更加清晰的操作,對於中大型的專案來說,一開始就把vuex的使用計畫在內是明智的選擇。

然而在一些小型的專案,或者說像我這樣寫到一半才發現vue2.0用不了$.broadcast和$dispatch的人來說,就需要乙個比較便捷的解決方法。那麼,eventbus的作用就體現出來了。

主要是現實途徑是在要相互通訊的兄弟元件之中,都引入乙個新的vue例項,然後通過分別呼叫這個例項的事件觸發和監聽來實現通訊和引數傳遞。

這裡來看乙個簡單的例子:

比如,我們這裡有三個元件,main.vue、click.vue、show.vue。click和show是父元件main下的兄弟元件,而且click是通過v-for在父元件中遍歷在了多個列表項中。這裡要實現,click元件中觸發點選事件後,由show元件將點選的是哪個dom元素console出來。

首先,我們給click元件新增點選事件

1

<

div

class

="click"

@click.stop.prevent

="doclick($event)"

>

div>

想要在doclick()方法中,實現對show元件的通訊,我們需要新建乙個js檔案,來建立出我們的eventbus,我們把它命名為bus.js

import vue from 'vue';  

export

default

new vue();

這樣我們就建立了乙個新的vue例項。接下來我們在click元件和show元件中import它。

import bus from 'common/js/bus.js';

接下來,我們在doclick方法中,來觸發乙個事件:

1

methods:

5 }

這裡我們在click元件中每次點選,都會在bus中觸發這個名為'gettarget'的事件,並將點選事件的event.target順著事件傳遞出去。

接著,我們要在show元件中的created()鉤子中呼叫bus監聽這個事件,並接收引數:

created() );  

}

這樣,在每次click元件的點選事件中,就會把event.target傳遞到show中,並console出來。

所以eventbus的使用還是非常便捷的,但是如果是中大型專案,通訊比較複雜,還是建議大家直接使用vuex。

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中同時使用到...

eventBus在vue中的使用

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