VUE2 0父子元件以及非父子元件通訊傳參詳解

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

父元件：

1

<
parent
>
2<
child 
:child-msg
="msg"
>
child
>
//這裡必須要用 - 代替駝峰
3parent
>45
data();
9 }

方式1：

1 props: ['childmsg']

1

props: 

1

props: 
6 }

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

1

子元件:
2<
template
>
3<
div 
@click
="up"
>
div>
4template
>56
methods: 
10 }

1

<
div>
2<
child 
@upup
="change"
:msg
="msg"
>
child
>
//監聽子元件觸發的upup事件,然後呼叫change方法
3div
>
4methods: 
8 }

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

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

1

<
div 
@click
="eve"
>
div>
2methods: 
6 }

1

<
div>
div>
2created() );
6 }

由於vue2.0 移除了1.0中的$dispatch 和$broadcast 這兩個元件之間通訊傳遞資料的方法 ,官方的給出的最簡單的公升級建議是使用集中的事件處理器,而且也明確說明了 乙個空的vue例項就可以做到,因為vue 例項實現了乙個事件分發介面.

1

new vue(
8 })

如何獲取到這個空的vue物件 eventhub呢.在元件裡面直接呼叫這個

某乙個元件內呼叫事件觸發

1

//通過this.$router.eventhub獲取此物件
2//呼叫$emit 方法
3 this.$router.eventhub.$emit('your_event_name', yourdata)

1

this.$router.eventhub.$on('your_event_name', (yourdata)=> )

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