Vue组件如何通信

如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与E是堂兄关系（非直系亲属） 针对以上关系我们归类为：

1. 父子组件之间通信
2. 非父子组件之间通信(兄弟组件、隔代关系组件等)

Vue组件通信的方法如下:

• props/$emit+v-on: 通过props将数据自上而下传递，而通过$emit和v-on来向上传递信息。prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告
• EventBus: 通过EventBus进行信息的发布与订阅。当项目较大,就容易造成难以维护的灾难
• vuex: 是全局数据管理库，可以通过vuex管理全局的数据流。Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上。
• $attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以进行跨级的组件通信
• provide/inject：以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效，这成为了跨组件通信的基础。

常见使用场景可以分为三类:

1. 父子组件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
2. 兄弟组件通信: eventBus ; vuex
3. 跨级通信: eventBus；Vuex；provide / inject 、$attrs / $listeners