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

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

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中父子元件通訊的坑

當在一個元件中,使用了其他自定義元件時,就會利用子元件的屬性和事件來和父元件進行資料交流。 父子元件之間的通訊就是 props down e...

vue使用bus匯流排,實現非父子元件間的通訊

vue元件通訊方式有好多,可以使用props傳值,但是props只能父子元件使用。也可以使用vuex,但是vuex比較重,而且非全域性的通訊...

總結Vue父子元件的7種通訊方式

父子元件要始終保持單向資料流動 否則隨著業務增長, 會變得難以維護與除錯,因為資料變化的觸發點很難找到 解決方案 子元件通過this emi...