vue中EventBus的使用

2021-10-08 09:31:30 字數 541 閱讀 3100

第一步:建立乙個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中呼叫元件b中的方法

bus.$emit

('editnode',params) //前是被呼叫的b中的方法名,後是傳遞的引數

第四步:元件b中接收a傳過來的值

bus.$on

('editnode', msg =

>

)

注意:使用eventbus的時候,會出現多次呼叫的情況,解決此問題可以通過如下方法

beforedestroy(

),

vue中eventBus的使用

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

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