vue 父子元件的傳遞 非父子元件間的傳遞

2022-04-29 18:42:09 字數 736 閱讀 9916

1.父元件傳遞資料給子元件

父元件資料如何傳遞給子元件呢?可以通過props屬性來實現

父元件:

//這裡必須要用 - 代替駝峰

data();

}子元件通過props來接收資料:

方式1:

props: ['childmsg']

方式2 :

props:

方式3:

props:

}這樣呢,就實現了父元件向子元件傳遞資料.

2.子元件與父元件通訊

那麼,如果子元件想要改變資料呢?這在vue中是不允許的,因為vue只允許單向資料傳遞,這時候我們可以通過觸發事件來通知父元件改變資料,從而達到改變子元件資料的目的.

子元件:

methods:

}父元件:

//監聽子元件觸發的upup事件,然後呼叫change方法

methods:

}3.非父子元件通訊

如果2個元件不是父子元件那麼如何通訊呢?這時可以通過eventhub來實現通訊.

所謂eventhub就是建立乙個事件中心,相當於中轉站,可以用它來傳遞事件和接收事件.

let hub = new vue(); //建立事件中心

元件1觸發:

methods:

}元件2接收:

created() );

}這樣就實現了非父子元件之間的通訊了.原理就是把hub當作乙個中轉站!

vue 非父子元件傳遞引數

參考學習 建立乙個事件中心,相當於中轉站,使用乙個空的 vue 例項作為 事件匯流排 可以用它來傳遞事件和接收事件,在乙個元件內呼叫emi t事件觸 發,另一 個元件內 呼叫 emit事件觸發,另乙個元件內呼叫 emit事件 觸發,另 乙個元件 內呼叫on進行事件繫結。new vue 某乙個元件內呼...

vue 父子元件傳遞

子元件接收父元件的資料可以使用props和bind進行 父元件 監聽子元件觸發的changehi事件,然後呼叫changehi方法 子元件 props cdata 接收父元件傳遞 父元件要監聽子元件的事件發生可以使用emit和on進行,子元件必須要觸發事件,然後父元件才可以接收到。子元件 metho...

Vue父子元件及非父子元件如何通訊

父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 子元件通過props來接收資料 方式1 方式2 方式3 這樣呢,就實現了父元件向子元件傳遞資料.那麼,如果子元件想要改變資料呢?這在vue中是不允許的,因為vue只允許單向資料傳遞,這時候我們可以通過觸發事件來通知父元件改變資料,從...