vue兄弟元件間傳值

2021-09-11 00:05:13 字數 726 閱讀 8970

舉例子說明,乙個元件中是input,監聽輸入的內容,在另乙個元件的div中顯示出來;

首先在assets中建立個事件匯流排js檔案eventbus.js,檔案中的**如下:

import vue from 『vue』;

export default new vue;

然後建立元件:inputcomponent,匯入eventbus,用input事件監聽輸入的內容,在這個監聽事件中,使用emit傳送輸入的資料,注意:emit中的第乙個引數,是自定義事件名,誰監聽誰的事件名就要和這個保持一致。

元件中的**:

接著建立第二個元件showcomponent,並且匯入eventbus。在mounted中監聽事件,此事件名要和傳送事件名保持一致。在此例子中, eventbus.emi

t("u

pcon

tent

",th

is.c

onte

nt);

和eve

ntbu

s.

emit("upcontent",this.content);和 eventbus.

emit("

upco

nten

t",t

his.

cont

ent)

;和ev

entb

us.on(「upcontent」,function(msg))都是「upcontent」。**如下:

vue兄弟元件間傳值

可以用過乙個vue例項bus作為媒介,要相互通訊的兄弟元件之中,都引入bus,之後通過分別呼叫bus事件觸發emi t和監聽 emit和監聽 emit和監 聽on來實現元件之間的通訊和引數傳遞,類似window的全域性自定義事件。類似與子傳父,只不過是利用乙個新的vue示例作為媒介,而不是當前vue...

vue 元件傳值 父子元件傳值,兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

vue之兄弟元件間的傳值 續接父子元件傳值

1 在專案的src目錄下建立bus資料夾並在其裡面建立index.js檔案,寫入如下 import vue from vue export default newvue 2 在提供值的兄弟元件寫入如下 import bus from bus bus.emit bortherclick 我是兄弟元件傳...