1.父組件傳遞數(shù)據(jù)給子組件
父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過props屬性來實現(xiàn)
父組件：
//這里必須要用 - 代替駝峰
data(){ return { msg: [1,2,3] }; }
子組件通過props來接收數(shù)據(jù): 方式1：
props: ['childMsg']
方式2 :
props: { childMsg: Array //這樣可以指定傳入的類型，如果類型不對，會警告 }
方式3：
props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定默認的值 } }
這樣呢，就實現(xiàn)了父組件向子組件傳遞數(shù)據(jù).
【案例演示1】
父組件里面的內(nèi)容
子組件里面的內(nèi)容
注意：這里的第一個父組件傳值給子組件分為傳引用和傳值兩種方式，傳引用的時候改變引用關系，則子組件的也會變化（改變父組件中數(shù)組的引用時可以看到子組件的props數(shù)組隨之改變，而子組件中綁定的數(shù)組確并沒有隨之改變）傳值則不會
2.子組件與父組件通信
那么，如果子組件想要改變數(shù)據(jù)呢？這在vue中是不允許的，因為vue只允許單向數(shù)據(jù)傳遞，這時候我們可以通過觸發(fā)事件來通知父組件改變數(shù)據(jù)，從而達到改變子組件數(shù)據(jù)的目的.
子組件: <div @click="up">
methods: { up() { this.$emit('upup','hehe'); //主動觸發(fā)upup方法，'hehe'為向父組件傳遞的數(shù)據(jù) } }
父組件:
//監(jiān)聽子組件觸發(fā)的upup事件,然后調(diào)用change方法
methods: { change(msg) { this.msg = msg; } }
【案例演示2】
父組件里面的內(nèi)容
子組件里面的內(nèi)容
注意：簡而言之就是先子組件定義一個事件，然后通過$emit方式
傳遞過去一個事件名稱，，父組件首先在html上用@事件名######="子組件自定義事件名"來接受，最后就是調(diào)用父組件剛剛定義的######事件，傳入一個參數(shù)，就可以接收來自子組件的事件觸發(fā)及其參######數(shù)傳遞。
大家可以參考這篇文章https://www.cnblogs.com/LoveAndPeace/p/7273648.html
3.非父子組件通信
如果2個組件不是父子組件那么如何通信呢？這時可以通過eventHub來實現(xiàn)通信. 所謂eventHub就是創(chuàng)建一個事件中心，相當于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件.
let Hub = new Vue(); //創(chuàng)建事件中心
組件1觸發(fā)：
methods: { eve() { Hub.on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); }
這樣就實現(xiàn)了非父子組件之間的通信了.原理就是把Hub當作一個中轉(zhuǎn)站！
以下是詳細代碼
<meta charset="utf-8">
Vue 官網(wǎng)介紹了非父子組件通信方法：
不過官網(wǎng)說的太簡單了，新手看完估計還是一臉懵逼。還有這個空的 Vue 實例放到哪里合適也值得商榷。
這篇文章的目的就是用一個簡單的例子讓你明白如何用 Bus ?? 來進行通信：
假設 bb 組件里面有個按鈕，點擊按鈕，把 123 傳遞給 aa 組件
// 根組件（this.$root)
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
// 空的實例放到根組件下，所有的子組件都能調(diào)用
Bus: new Vue()
}
})
bb 組件內(nèi)調(diào)用事件觸發(fā)↓
<button @click="submit">提交<button>
methods: {
submit() {
// 事件名字自定義，用不同的名字區(qū)別事件
this.$root.$emit('eventName', 123)
}
}
aa 組件內(nèi)調(diào)用事件接收↓
// 當前實例創(chuàng)建完成就監(jiān)聽這個事件
created(){
this.$root.$on('eventName', value => {
this.print(value)
})
},
methods: {
print(value) {
console.log(value)
}
},
// 在組件銷毀時別忘了解除事件綁定
beforeDestroy() {
this.$root.Bus.$off('eventName')
},
我自己的實踐：
1、這是父組件app.vue，分別有兩個子組件input和dialog
注意：這里一定要引入vue不然會報錯
1、這是一個輸入框組件，通過輸入觸發(fā)change事件，給彈出框組件傳值
***關鍵詞：通過$emit觸發(fā)事件
2、這是一個彈出框組件，通過監(jiān)聽輸入框組件的change事件傳過來的值來判斷是否彈出
***關鍵詞：通過$on接收事件
這樣就可以了，是不是很簡單？
問題一：如果有多個組件組件需要通信，是不是要在根組件上多建幾個 Bus？
答：不需要的，只要保證事件名 （eventName）不一樣就行了。
問題二：為什么要弄個 Bus？直接 this.on、this.
emit 不更簡單粗暴？
答：按照文檔上的說法是專門用一個空的 Vue 實例（Bus）來做中央事件總線更加清晰也易于管理。
可以參考我最新的文章關于兄弟組件之間的通信：
http://m.itdecent.cn/p/3e7b62e0bbf7
