Vue组件通信

1. 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信

2. ref：这个属性用在子组件上，指向子组件的实例，可以通过实例来访问组件的数据和方法

3. $emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数

4. eventBus事件总线（$emit / $on）

适用于父子组件,非父子组件等之间的通信,使用步骤如下:

(1)创建事件中心管理组件之间的通信:

// event-bus.js
import Vue from 'vue'

export const EventBus = new Vue()

(2)发送事件 假设有两个兄弟组件firstCom和secondCom：

firstCom和secondCom的父组件：

<template>
  <div>
    <first-com></first-com>
    <second-com></second-com>
  </div>
</template>

<script>
import firstCom from './firstCom.vue'
import secondCom from './secondCom.vue'
export default {
  components: { firstCom, secondCom }
}
</script>

在firstCom组件中发送事件：

<template>
  <div>求和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

如果项目过大，使用这种方式进行通信，后期维护起来会很困难

5.依赖注入（provide / inject）

这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

provide 钩子用来发送数据或方法。

inject钩子用来接收数据或方法

用法：

父组件中：

provide() { 
    return {     
        num: this.num  
    };
}

子组件中：

inject: ['num']