Vue案例引发的「嵌套组件」通信的简单方式

我们都知道 Vue 是采用组件化开发的模式，组件化的优势在于相对独立，易于维护，可复用。你可以把项目看成许多组件的组合而成。

既然项目中存在很多的组件，而且又是相对独立的，但组件间肯定是存在数据的传递交互。Vue中给我提供比较多的方式去进行组件间的交互通信。

这篇文章不打算详尽组件之间的通信，而是说说利用 $attrs 与 $listeners 进行「嵌套组件」的通信。

可以想象一下项目中组件与组件的关系无外乎这么几种：父子，兄弟，祖孙（嵌套）。

1. 父子组件：父组件通过 props 向下传递子组件数据，子组件通过事件向上发送父组件消息。或者也可以通过 ref 属性、$parent、$children等方法获取数据和事件。
2. 兄弟组件：可以通过共同的父组件作为桥梁进行通讯，也可以利用全局事件 eventBus 或者比较复杂的 Vuex。

一图胜千言

通过上图，我们可以了解常见的组件通信方式。但实际的开发项目中可能并没有这么简单，最近在做项目时遇到嵌套组件的情况，比如「组件A」包含「组件B」，「组件B」包含「组件C」。

那「组件A」与「组件C」如何通信就是值得我们商榷的问题，是利用 Vuex 还是利用其他方式呢？

首先 Vuex 是优秀的状态管理工具，对于复杂而又庞大的系统而言使用 Vuex 再好不过。

但如果我们的系统相对简单，并且「组件A」与「组件C」之间只是进行简单的数据传递，似乎引入 Vuex 并不是一个好的选择，相反会带来复杂度的上升。

不过 Vue 在 2.4.0 版本添加了 2 个属性「$attrs」与「$listeners」，使用它们进行嵌套组件（祖孙）的通信是一个不错的选择，接下来我们就看看它们是什么，以及如何使用。

1.$attrs