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

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

父向子傳遞數據通過props

**父組件代碼**

**子組件代碼**

子組件向父組件傳遞分為兩種類型。
1、子組件改變父組件傳遞的props（你會發現通過props中的Object類型參數傳輸數據，可以通過子組件改變數據內容。這種方式是可行的，但是不推薦使用，因為官方定義prop是單向綁定）
2、通過$on和$emit

*通過props實現傳遞*
**父組件代碼**

**子組件代碼**

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

**子組件代碼**

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

**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組件**