$attrs 是父组件传递给子组件的未在 props 中声明的所有属性组成的对象，用于透传属性到底层元素；$listeners 是父组件绑定在子组件上的所有事件监听器组成的对象，用于透传事件。例如，在封装输入组件时，通过 v-bind="$attrs" 和 v-on="$listeners" 可将父组件传递的属性和事件直接应用到内部的 input 元素上。常见用途包括：1. 封装基础组件时避免手动透传属性与事件；2. 防止 props 泛滥；3. vue 3 中 $listeners 已合并进 $attrs，事件以 onxxx 形式存在，只需使用 v-bind="$attrs" 即可同时绑定属性与事件。理解这两个属性能提升组件封装的灵活性与简洁性。
在 Vue 开发中，$attrs 和 $listeners 是两个非常实用但容易被忽视的实例属性。它们主要用在组件通信中，尤其是在封装高阶组件或者需要透传属性和事件的时候特别有用。
什么是 $attrs？
$attrs 是一个对象，包含了父组件传递给当前组件的所有非 props 属性（也就是没有在 props 中声明的属性）。
举个例子，如果你有一个组件：
<template><input type="text" v-bind="$attrs"></template>
父组件这样使用它：
<myinput placeholder="请输入内容" class="form-control"></myinput>
那 placeholder 和 class 都会被包含在 $attrs 中，然后通过 v-bind="$attrs" 直接绑定到 <input> 元素上。
常见用途：封装可复用的基础组件时，比如输入框、按钮等，用于将所有未显式处理的属性直接应用到底层元素上。在组合组件结构时避免手动透传一堆属性。
⚠️ 注意：如果某个属性已经在 props 中定义了，它就不会出现在 $attrs 中。
什么是 $listeners？
$listeners 是一个对象，包含了父组件绑定在当前组件上的所有监听的事件。它通常用来将子组件的事件原样传递给更内层的元素。
比如你写了一个包装组件：
<template><input type="text" v-on="$listeners"></template>
父组件监听了 @input：
<myinput></myinput>
那么这个 input 事件就会通过 $listeners 被绑定到底层的 <input> 上。
常见用途：
- 组件封装时透传事件，特别是像
input、change这类基础事件。- 简化父子组件之间的事件转发逻辑。
? 提示：从 Vue 2.4 开始，$listeners 可以作为 v-on 的对象语法来使用。Vue 3 中虽然不再单独暴露 $listeners，但你可以通过 v-on="..." 直接绑定监听器。
使用场景与注意事项
1. 封装基础表单组件
当你在做一个 UI 库，封装一个通用的输入组件时，$attrs 和 $listeners 可以帮你省去很多重复代码，让组件行为更接近原生 HTML 元素。
<template><input v-bind="$attrs" v-on="$listeners"></template>
这样，用户就可以像使用普通 <input> 一样使用你的组件，包括设置 placeholder、type、required 等属性，以及监听 input、blur 等事件。
2. 避免 props 泛滥
有时候你可能不想把所有的属性都通过 props 显式声明一遍，尤其是那些只用于底层 DOM 的属性。这时候 $attrs 就很有用了。
3. 注意 Vue 3 的变化
在 Vue 3 中，$listeners 已经合并进 $attrs，也就是说，事件也会以 onXxx 的形式出现在 $attrs 中。例如：
{
onClick: fn,
onInput: fn
}
所以你在 Vue 3 中只需要用 v-bind="$attrs" 就可以同时绑定属性和事件。
基本上就这些。这两个属性虽然看起来简单，但在做组件抽象或封装时非常实用，理解它们能让你写出更灵活、更简洁的组件逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
