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

官網api: 

父元件：

<

child 
message
="hello!"
>
child
>

子元件：

vue.component('child', }'})

結果：

hello!

<

child 
:my-message
="parentmsg"
>
child
>
data();
}

子元件：通過props屬性接收資料

//

方式一props: ['mymessage']
//方式二
props: 
//方式三
props: 
}

props屬性驗證有以下形式：

vue.component('example', ,

//數值且有預設值
propd: ,
//陣列/物件的預設值應當由乙個工廠函式返回
prope: }},
//自定義驗證函式
propf: 
}}})

vue是單向資料傳遞的，如果子元件直接改變父元件傳過來的資料是不允許的。但是可以通過觸發事件通知父元件改變資料，實現改變子元件的目的。

子元件：

<

div 
@click
="childclick()"
>
div>
methods: 
}

父元件：

<

child 
@tell
="change"
:msg
="msg"
>
child
>
//監聽子元件觸發的tell事件,然後呼叫change方法;msg是父元件傳給元件的資料
methods: 
}

有時候，非父子關係的兩個元件之間也需要通訊。在簡單的場景下，可以使用乙個空的 vue 例項作為事件匯流排。原理就是把 vue 例項當作乙個中轉站。

var

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

//

觸發元件 a 中的事件
methods: 
}

//

在元件 b 建立的鉤子中監聽事件
created() );
}

方法2:

new

vue(
})

在元件內呼叫事件觸發

//

通過this.$root.eventhub獲取此物件
//呼叫$emit 方法
this.$root.eventhub.$emit('eventname', data)

在另乙個元件呼叫事件接受，移除事件***使用$off方法。

this.$root.eventhub.$on('eventname', (data)=>)

更多專業前端知識，請上

【猿2048】www.mk2048.com

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

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

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