Vue组件间如何通过$attrs和$listeners实现通信原理？

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

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

这种方式的优点是更优雅，使用起来也更方便。

前言

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

$attrs

官方解释：

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