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

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

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

**父組件代碼**

**子組件代碼**

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

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

**子組件代碼**

*通過(guò)$on,$emit*
**父組件代碼**

**子組件代碼**

簡(jiǎn)單情況下我們可以通過(guò)使用一個(gè)空的Vue實(shí)例作為中央事件總線，（這里也可以使用app實(shí)例，而不需要新建一個(gè)空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組件**