Vue - $attrs及$listeners属性实现多级嵌套组件通信

前言

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

如上图所示，A 和 B、B 和 C都是父子关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？

A 组件与 B 组件之间的通信： （父子组件）

如上图所示，A、B、C三个组件依次嵌套，按照 Vue 的开发习惯，父子组件通信可以通过以下三种方式实现：

1、A To B 通过props的方式向子组件传递数据，B To A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现数据传递

2、通过设置全局Vuex共享状态，通过 computed 计算属性和 commit mutation的方式实现数据的获取和更新，以达到父子组件通信的目的。

3、Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。

往往数据在不需要全局的情况而仅仅是父子组件通信时，使用第一种方式即可满足。

A 组件与 C 组件之间的通信： （跨多级的组件嵌套关系）

如上图，A 组件与 C 组件之间属于跨多级的组件嵌套关系，以往两者之间如需实现通信，往往通过以下方式实现：

1. 借助 B 组件的中转，从上到下props依次传递，从下至上，$emit事件的传递，达到跨级组件通信的效果
2. 借助Vuex的全局状态共享
3. Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。

多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此 Vue2.4 版本提供了另一种方法listeners

attrs/$listeners介绍

$props：当前组件接收到的 props 对象，Vue 实例代理了对其 props 对象属性的访问。

**attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。 通俗的理解为：子辈可以通过$attrs将未在自己组件内注册的祖辈传递下来的参数接收来，并传递孙辈。

inheritAttrs：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。而通过实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。

**listeners" 传入内部组件

代码示例

A组件（index.vue）

B组件（child1.vue）

C组件（child2.vue）

D组件（child3.vue）

最终页面展示效果

总结：

A组件一共传了四个变量foo、boo、coo、doo，一个属性title，两个接收函数test1，test2

组件B中props中接收了一个foo。所以$attrs传的是剩下的 { "boo": "boo", "coo": "coo", "doo": "doo", "title": "跨级组件通信" }

组件C中props中接收了一个boo。所以$attrs传的是剩下的 { "coo": "coo", "doo": "doo", "title": "跨级组件通信" }

组件D中props中接收了coo和title。所以$attrs传的是剩下的 { "doo": "doo"}

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料