1.父組件傳遞數(shù)據(jù)給子組件
父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過props屬性來實(shí)現(xiàn)
父組件：
//這里必須要用 - 代替駝峰data(){return{
msg: [1,2,3]
};
}
子組件通過props來接收數(shù)據(jù):
方式1：props: [
'childMsg']
方式2 :props: {? ? childMsg: Array
//這樣可以指定傳入的類型，如果類型不對(duì)，會(huì)警告}
方式3：props: {? ? childMsg: {? ? ? ? type: Array,
default: [0,0,0]//這樣可以指定默認(rèn)的值}
}
2.子組件與父組件通信
子組件:
methods: {testClick() {this.$emit('test','123');//主動(dòng)觸發(fā)test方法，'123'為向父組件傳遞的數(shù)據(jù)}
}
父組件:
? ? ? //監(jiān)聽子組件觸發(fā)的test事件,然后調(diào)用change方法
methods: {change(msg) {this.msg =msg;? // msg: 123
}
}
3.非父子組件通信
如果2個(gè)組件不是父子組件那么如何通信呢？這時(shí)可以通過eventHub來實(shí)現(xiàn)通信.
所謂eventHub就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件.
let Hub=newVue();//創(chuàng)建事件中心
組件1觸發(fā)：
methods: {eve() {
Hub.$emit('change','hehe');//Hub觸發(fā)事件}}
組件2接收:
created() {Hub.$on('change', () => {//Hub接收事件this.msg = 'hehe';
});
}
