学习Vue也有一段时间了，在项目中使用Vue也有好几个了，但Vue组件间的状态管理（数据通信）一直是自己的死穴。对于Vue组件间的数据通信，无外呼是父组件向子组件、子组件向父组件、兄弟组件以及嵌套组件之间的数据通信。而且组件之间的通信方式也有很多种。@Gongph的《Vue 父子组件通信的十种方式》一文就详细的介绍了Vue组件，指的是父子组件之间的数据通信就有差不多十种方式。但很多时候我们组件之间的数据通信不仅仅是停留在父子组件之间的数据通信。比如说还有兄弟组件和嵌套组件之间的数据通信。

如果我们抛开嵌套组件之间的数据通信，我们可以用简单的下图来描述Vue组件之间的数据通信：

事实上除了上图方式对数据进行通信之外，还有一些其他的方式，比如父组件获取子组件数据和事件可以通过：

• 通过给子组件绑定ref属性来获取子组件实例
• 通过this.$children获取子组件实例

对于子组件获取父组件数据和事件，可以通过：

• 通过props传递父组件数据和事件，或者通过$emit和$on实现事件传递
• 通过ref属性，调用子组件方法，传递数据；通过props传递父组件数据和事件，或者通过$emit和$on实现事件传递
• 通过this.$parent.$data或者this.$parevent._data获取父组件数据，通过this.$parent执行父组件方法

对于兄弟组件之间数据通信和事件传递，可以通过：

• 利用eventBus挂载全局事件
• 利用$parent进行数据传递，$parent.$children调用兄弟组件事件

另外，复杂一点的，可以通过Vuex完成Vue组件数据通信。特别是多级嵌套组件间的数据通信。但如果仅仅是数据之间传递，而不做中间处理，使用Vuex有点浪费。不过，自Vue 2.4版本开始提供了另一种方法：

使用v-bind="$attrs"将父组件中不被认为props特性绑定的属性传递给子组件。

通常该方法会配合interiAttrs一起使用。之所以这样使用是因为两者的出现使得组件之间跨组件的通信在不依赖Vuex和eventBus的情况下变得简洁，业务清晰。

其实这也就是我们今天要了解的另一个知识点。多级嵌套组件之间，我们如何借助$attrs和$listeners来实现数据之间的通信。

业务场景

刚才提到过，我们接下来要聊的是多级嵌套组件之间的数据通信。为了让事情不变得太过于复杂（因为太复杂，对于初学者而言不易于理解和学习）。这里我们就拿三级组件之间的嵌套来举例。比如我们有三个组件ComponentA、ComponentB和ComponentC，而且它们之间的关系是ComponentA > ComponentB > ComponentC（>是包含关系），用下图来描述或许更易于明白他们之间的关系：

就三级嵌套的组件而言，他们的关系相对而言要简单一些：

• ComponentA组件是ComponentB组件的父组件，他们的关系是父子关系
• ComponentB组件是ComponentC组件的父组件，他们的关系也是父子关系
• ComponentA组件是ComponentC组件的祖先组件，他们的关系是祖孙关系

对于这三个组件之间的数据通信，按照我们前面所掌握的知识，估计想到的是：

props向下，$emit向上。

也就是说，ComponentA向ComponentB可以通过props的方式向子组件传递，ComponentB向ComponentA通过在ComponentB组件中$emit向上发送事件，然后在ComponentA组件中$on的方式监听发送过来的事件。对于ComponentB和ComponentC两组件之间的通信也可以使用类似的方式。但对于ComponentA组件到ComponentC组件之间的通信，需要借助ComponentB组件做为中转站，当