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

2021-09-21 07:12:55 字數 642 閱讀 5039

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

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

父元件:

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

data();

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

方式1:

props: ['childmsg']

方式2 :

props:

props:

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

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

子元件:

methods:

}父元件:

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

methods:

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

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

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

元件1觸發:

methods:

}元件2接收:

created() );

}

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