Vue组件中如何通过$attrs和$listeners实现跨级通信？

本文共计1163个文字，预计阅读时间需要5分钟。

前言：Vue通信手法有很多种，包括props、emit、vuex、event bus、provide/inject等。还有一种通信方式，那就是$attrs和$listeners，之前早就听说过这两个api，但一直拖着没有来补充。

这种方式的优点在于其简洁性，使用起来也很方便。下面简单介绍一下：

1. $attrs：它是一个对象，包含了所有父组件传递给子组件的属性。通过$attrs，子组件可以访问到这些属性，并进行相应的处理。

2. $listeners：它是一个对象，包含了所有父组件传递给子组件的事件监听器。通过$lis-teners，子组件可以监听这些事件，并在事件触发时执行相应的处理。

这种方式的优点在于其简洁性和方便性，使得组件之间的通信更加灵活。但需要注意的是，这种方式适用于简单的通信场景，对于复杂的通信需求，可能需要结合其他通信手法一起使用。

前言

vue通信手段有很多种，props/emit、vuex、event bus、provide/inject 等。还有一种通信方式，那就是$attrs和$listeners，之前早就听说这两个api，趁着有空来补补。这种方式挺优雅，使用起来也不赖。下面例子都会通过父、子、孙子，三者的关系来说明使用方式。

$attrs

官方解释：

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。