摘要：前言作為一個初學(xué)者不得不了解的就是組件間的數(shù)據(jù)通信暫且不談。通信方式根據(jù)組件之間的關(guān)系有不同之處。子組件改變父組件傳遞的你會發(fā)現(xiàn)通過中的類型參數(shù)傳輸數(shù)據(jù)，可以通過子組件改變數(shù)據(jù)內(nèi)容。

作為一個vue初學(xué)者不得不了解的就是組件間的數(shù)據(jù)通信(暫且不談vuex)。通信方式根據(jù)組件之間的關(guān)系有不同之處。組件關(guān)系有下面三種：父-->子、子-->父、非父子

父向子傳遞數(shù)據(jù)通過props

**父組件代碼**

**子組件代碼**

子組件向父組件傳遞分為兩種類型。
1、子組件改變父組件傳遞的props（你會發(fā)現(xiàn)通過props中的Object類型參數(shù)傳輸數(shù)據(jù)，可以通過子組件改變數(shù)據(jù)內(nèi)容。這種方式是可行的，但是不推薦使用，因?yàn)楣俜蕉xprop是單向綁定）
2、通過$on和$emit

*通過props實(shí)現(xiàn)傳遞*
**父組件代碼**

**子組件代碼**

*通過$on,$emit*
**父組件代碼**

**子組件代碼**

簡單情況下我們可以通過使用一個空的Vue實(shí)例作為中央事件總線，（這里也可以使用app實(shí)例，而不需要新建一個空Vue實(shí)例）

**main.js**
let bus = new Vue()
Vue.prototype.bus = bus

或者

**main.js**
new Vue({
  el: "#app",
  router,
  template: "",
  components: { App },
  beforeCreate () {
    Vue.prototype.bus = this
  }
})

**header組件**

**footer組件**