在Vue中，组件间的消息传递是至关重要的。组件时vue.js最强大的功能之一。组件实例的作用域是相互独立的，所以不同组件之间的数据就无法相互引用。
组件之间的关系可以如下所示：
A和B、B和C、B和D是父子关系，C和D是兄弟关系，A和C是隔代关系（可隔多代）
对于不同的关系，组件之间的通信可以有不同的方式。
1. 父子组件通信
父组件向子组件传递数据是通过prop传递的。父组件在嵌套子组件template的时候，使用单项数据绑定的方式，将父组件的数据绑定到子组件身上。如下代码第17行。
子组件通过prop属性来接收父组件传递来的数据，此数据可以直接使用，就相当于在data中定义过了。
子组件可以对接收的数据进行数据验证，直接定义类型则验证其类型，使用对象形式则可用validator方法来对其进行进一步的较复杂的验证。但需注意，如果只验证，不进行其他操作，则验证错误会在控制台中显示出错误信息，并不影响页面的渲染。
父子组件通信
父组件
子组件
父组件传递过来的数据是： {{ money }}
2. 子父组件通信
子组件向父组件传递数据是通过$emit触发事件来做到的。
例如这样一个场景：父亲节的时候，儿子向父亲送红包，父亲收到红包之后把红包藏在自己私房钱小金库里。
所以子组件要有一个give()来给红包，父组件要有一个hide()来藏红包。
结合的关键就是父组件嵌入子组件template时使用自定义事件的形式将自己的hide()方法绑定到子组件身上，以便子组件能够调用该方法。如下代码的第18行。
子组件接收到此方法后，可以使用this.$emit('hide', this.redEnvelop)来调用父组件的hide()方法，其中'hide'是父组件将此方法绑定给子组件时自定义的事件名称，第二个参数(this.redEnvelop)则是调用hide()时的参数。将整个调用过程封装到子组件的give()方法中，就可以实现子父组件通信。
子父组件通信
父组件
父亲的小金库有： {{ xiaoJinKu }}
子组件
3. 兄弟组件通信（借助ref与prop）
很多时候，组件的通信往往不是简单的父子关系，如下面一个模拟场景：
父亲有一子一女，女儿打儿子，儿子哭。
那girl与son怎么交互呢？经过上面的父子组件通信，我们可以联想到，通过父组件作为媒介来进行通信。
这种方法主要利用了ref与prop来将父组件作为中间媒介。该方法实现时过于复杂，且组件隔代越多，写起来就越复杂臃肿，不推荐用。
即girl组件有一个hit()方法，son组件有一个flag数据，默认为false，当其为true时则儿子开始哭（显示为页面多一个内容为5555的p标签）。
首先，父组件在嵌入子组件template时加上ref属性，以便在父组件中调用子组件中的内容。如下代码的第15行。
接着，在父组件中写一个名为fn()的methods，通过this.$refs.son.changeFlag()来调用son组件的changeFlag()方法，以达到页面中p标签显示的开关切换。
最后，父组件在嵌入girl组件template时，使用单项数据绑定的方式，将父组件的数据绑定到girl组件身上。如下代码第14行。
girl组件通过prop属性来接收父组件传递来的fn()方法，随后在自己的hit()方法中调用fn()，即可达到通过父组件与son组件通信的效果。
非父子组件通信
555555555555555
4. 非父子组件通信（借助eventBus事件总线）
定义一个新的Vue实例bus：const bus = new Vue()，在bus上有两个重要属性：$on和$emit，这两个属性都属于node event api -> EventEmitter
选择与3同样的实例，在Son组件中数据初始化完毕之后，利用生命周期钩子，把changeFlag()方法挂载到bus.$on的自定义函数上（如下代码的第52行）。
此处生命周期钩子的选择应该在数据初始化完毕之后，所以应该是beforeCreate()之后，如created()、beforeMount()、Mounted()。
然后再Girl组件中，就可以用bug.$emit('自定义函数名')来调用事件总线上挂载的Son组件中的方法。
这种方法不会因为组件关系复杂而受到很大变化，所以推荐使用。
事件总线进行组件通信
555555555555555
5. 隔代组件通信
父子组件通信我们可以通过prop、$emit来实现，但遇到隔代组件，就要嵌套多层prop或$emit来实现隔代通信，这显示是不现实的。Vue2.4中开始提供了$attrs和$listeners来解决这个问题，能让组件之间隔代通信。
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
利用$attrs和$listeners进行隔代通信
祖先组件向子孙组件传值（provide和inject）
provide/inject API主要解决了跨级组件间的通信问题，可以允许一个祖先组件向其所有子孙组件诸如一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
即祖先组件通过provide来提供变量，然后在子孙组件中通过inject来注入变量。
不过它的使用场景主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
provide/inject实现跨级组件通信