vue2 0父子元件間通訊

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

父元件：

//這裡必須要用 - 代替駝峰data();}

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

方式1：

props: ['childmsg']

方式2 :

props:

props: }

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

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

使用 v-on 繫結自定義事件

每個 vue 例項都實現了事件介面(events inte***ce)，即：

使用 on(

even

tnam

e)監聽

事件使用

emit(eventname) 觸發事件

父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

子元件:

methods: }

父元件:

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

methods: }

觸發事件使用駝峰格式的自定義事件名稱，在父元件中就可以使用on-evnet-name的形式來監聽。

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

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

使用乙個空的 vue 例項作為**事件匯流排：

let hub = new vue(); //建立事件中心,注意hub要放在全域性

元件1觸發：

methods: }

元件2接收:

created() );}

vue2 0父子元件間通訊

父元件資料如何傳遞給子元件呢？可以通過props屬性來實現 父元件 這裡必須要用 代替駝峰data 子元件通過props來接收資料 方式1 props childmsg 方式2 props props 這樣呢，就實現了父元件向子元件傳遞資料.那麼，如果子元件想要改變資料呢？這在vue中是不允許的，因...

Vue2 0 之父子兄弟元件間通訊

childa childb div template type text ecmascript 6 import childa from components a.vue import childb from components b.vue export default script lang s...

vue2 0 父子元件通訊 兄弟元件通訊

父元件是通過props屬性給子元件通訊的來看下 父元件 content 注意這裡用駝峰寫法哦 data 子元件通過props來接受資料 第一種方法 props childcom 第二種方法 props 第三種方法 props 子元件與父元件通訊 vue2.0只允許單向資料傳遞，我們通過出發事件來改變...