vue组件之间的通信

摘要：前言作为一个初学者不得不了解的就是组件间的数据通信暂且不谈。通信方式根据组件之间的关系有不同之处。子组件改变父组件传递的你会发现通过中的类型参数传输数据，可以通过子组件改变数据内容。

作为一个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组件**