在前端开发的工作中，组件通信是一个绕不开的技术需要。尤其是在开发复杂应用程序的过程中，为了实现后续的复用，我们往往需要通过封装组件来避免大量的代码重复.今天我想把平时工作中常用到的几种通信方法进行一个基本的整合，用来加深记忆.
一、基本概念
组件通信主要分为三个大的种类：父子组件间通信、兄弟组件间通信以及任意组件之间。
1、父子组件间通信
- 子组件通过props属性来接收父组件的数据，然后父组件在子组件上注册监听事件，子组件通过$emit触发事件来向父组件发送数据。
- 通过ref属性给子组件设置一个名字。父组件通过parent获得父子间，通过这种方式也可以实现通信。
- 使用provide/inject，在父组件中通过provide提供变量，在子组件中通过inject来将变量注入到组件中。不论子组件有多深，只要调用了inject那么就注入provide中的数据.
2、兄弟组件间通信
- 使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
- 通过 refs 来获取到兄弟组件，也可以进行通信。
3、任意组件之间
- 使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。
如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。
二、通信方式的具体使用
方法一： props / $emit
1. 父组件向子组件传值
props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式
2. 子组件向父组件传值
$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。
方法二：eventBus事件总线（on）
eventBus事件总线适用于父子组件、非父子组件等之间的通信，事件总线就相当于一个桥梁，不同组件通过它来通信。使用步骤如下：
（1）创建事件中心管理组件之间的通信
（2）发送事件
假设有两个兄弟组件firstCom和secondCom：
在firstCom组件中发送事件：
（3）接收事件
在secondCom组件中发送事件：
方法三：依赖注入（provide / inject）
该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方法来进行传值。就不用一层一层的传递了。依赖注入所提供的属性是非响应式的。
provide / inject是Vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
provide钩子用来发送数据或方法inject钩子用来接收数据或方法
在父组件中发送数据或方法
在子组件中接收数据或方法
方法四：ref / $refs
实现父子组件之间的通信，ref这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。
在子组件中发送数据或方法
在父组件中接收数据或方法
方法五：children
- 使用
$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法） - 使用
$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。
在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。
需要注意：
- 通过
$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例 - 在组件中使用
$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的 - 在根组件
#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组 $children的值是数组，而$parent是个对象
