1. 父子組件間通信
- 父組件傳遞數(shù)據(jù)給子組件（通過(guò)props屬性來(lái)實(shí)現(xiàn)）
/*父組件*/
<parent>
<child :child-msg="msg"></child>//這里必須要用 - 代替駝峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
子組件通過(guò)props來(lái)接收數(shù)據(jù)
/*方式一：*/
props: ['childMsg']
/*方式二：*/
props: {
childMsg: Array
}
/*方式三：*/
props: {
childMsg: {
type: Array,
dafault: [0,0,0] //這樣可以指定默認(rèn)的值
}
}
- 子組件與父組件通信
那么踱承，如果子組件想要改變數(shù)據(jù)呢哨免？這在vue中是不允許的琢唾，因?yàn)関ue只允許單向數(shù)據(jù)傳遞盾饮，這時(shí)候我們可以通過(guò)觸發(fā)事件來(lái)通知父組件改變數(shù)據(jù)，從而達(dá)到改變子組件數(shù)據(jù)的目的.
子組件:
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe'); //主動(dòng)觸發(fā)upup方法普办，'hehe'為向父組件傳遞的數(shù)據(jù)
}
}
父組件:
<div>
<child @upup="change" :msg="msg"></child> //監(jiān)聽子組件觸發(fā)的upup事件,然后調(diào)用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
2. 非父子組件間通信
如果2個(gè)組件不是父子組件那么如何通信呢？這時(shí)可以通過(guò)eventHub來(lái)實(shí)現(xiàn)通信.
所謂eventHub就是創(chuàng)建一個(gè)事件中心徘钥，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件.
let Hub = new Vue(); //創(chuàng)建事件中心
組件1觸發(fā)：
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub觸發(fā)事件
}
}
組件2接收:
<div></div>
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}
這樣就實(shí)現(xiàn)了非父子組件之間的通信了.原理就是把Hub當(dāng)作一個(gè)中轉(zhuǎn)站舆驶！
