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

2022-08-15 17:15:13 字數 728 閱讀 6655

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

父元件:

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

方式1:

方式2 :

方式3:

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

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

父元件:

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

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

元件1觸發:

元件2接收:

vue2 0父子元件及非父子元件通訊

1.父元件傳遞資料給子元件 父元件資料可以通過props屬性來傳給子元件 父元件 parent msg 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 2.子元件與父元件通訊 如果子元件想要改變資料呢?這...

vue2 0父子元件以及非父子元件如何通訊

父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 parent msg 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 這樣呢,就實現了父元件向子元件傳遞資料.那麼,如果子元件想要改變資...

vue2 0父子元件以及非父子元件如何通訊

vue2.0父子元件以及非父子元件如何通訊 父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 這樣呢,就實現了父元件向子元件傳遞資料.那麼...