父子通信目前有四種方式：
1.父組件傳遞數(shù)據(jù)給子組件
父組件數(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ù):
方式1：
props: ['childMsg']
方式2 :
props: { childMsg: Array //這樣可以指定傳入的類型趁矾，如果類型不對(duì)石咬，會(huì)警告}
props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定默認(rèn)的值 }}
這樣呢，就實(shí)現(xiàn)了父組件向子組件傳遞數(shù)據(jù).
2.子組件與父組件通信
那么，如果子組件想要改變數(shù)據(jù)呢？這在vue中是不允許的，因?yàn)関ue只允許單向數(shù)據(jù)傳遞绑咱，這時(shí)候我們可以通過(guò)觸發(fā)自定義事件來(lái)通知父組件改變數(shù)據(jù)，從而達(dá)到改變子組件數(shù)據(jù)的目的.
使用 v-on 綁定自定義事件
每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)枢泰，即：
使用 emit(eventName) 觸發(fā)事件
父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽子組件觸發(fā)的事件描融。
子組件:
<template> <div @click="up"></div></template>methods: { up() { this.$emit('resultChange','hehe'); //主動(dòng)觸發(fā)resultChange方法，'hehe'為向父組件傳遞的數(shù)據(jù) }}
父組件:
<div> <child @on-result-change="mychangHandle" :msg="msg"></child> //監(jiān)聽子組件觸發(fā)的upup事件,然后調(diào)用change方法</div>methods: { mychangHandle(msg) { this.msg = msg; }}
觸發(fā)事件使用駝峰格式的自定義事件名稱衡蚂，在父組件中就可以使用on-evnet-name的形式來(lái)監(jiān)聽窿克。
3.任意組件間通信
如果2個(gè)組件不是父子組件那么如何通信呢？這時(shí)可以通過(guò)eventHub來(lái)實(shí)現(xiàn)通信.
所謂eventHub就是創(chuàng)建一個(gè)事件中心毛甲，相當(dāng)于中轉(zhuǎn)站年叮，可以用它來(lái)傳遞事件和接收事件.
使用一個(gè)空的 Vue 實(shí)例作為中央事件總線：
let Hub = new Vue(); //創(chuàng)建事件中心,注意Hub要放在全局
組件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'; });}
- $refs
盡管有 props 和 events ，但是有時(shí)仍然需要在 JavaScript 中直接訪問(wèn)子組件玻募。為此可以使用 ref 為子組件指定一個(gè)索引 ID 只损。
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 訪問(wèn)子組件
var child = parent.$refs.profile
當(dāng) ref 和 v-for 一起使用時(shí)， ref 是一個(gè)數(shù)組或?qū)ο笃哌郑鄳?yīng)的子組件跃惫。
refs 爆存。
