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

2022-05-03 03:54:11 字數 873 閱讀 9464

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

父元件:

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

data();

}

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

方式1:

props: ['childmsg']

方式2 :

props:

方式3:

props: 

}

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

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

子元件:

methods:

}

父元件:

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

methods:

}

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

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

let hub = new vue(); //

建立事件中心

元件1觸發:

methods:

}

元件2接收:

created() );

}

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

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

官網api 父元件 child message hello child 子元件 vue.component child 結果 hello 父元件 child my message parentmsg child data 子元件 通過props屬性接收資料 方式一props mymessage 方式...

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 這樣呢,就實現了父元件向子元件傳遞資料.那麼...