在 Vue 中，attrs 和 listeners 各自适用于哪些典型场景？请结合组件通信或属性传递的具体情境进行说明。
考察说明
考查对 Vue 实例属性 attrs 和 listeners 的理解及应用场景。
回答思路
- 【回答框架 1】attrs 是包含父作用域中不作为 prop 被识别的 attribute 绑定（class 和 style 除外）的对象。主要使用场景包括：当组件需要透传未声明的属性到内部元素时，如封装第三方组件或高阶组件，可用 v-bind="$attrs" 向下传递。
- 【回答框架 2】listeners 是包含父作用域中的 v-on 事件监听器（不含 .native 修饰符）的对象。主要使用场景是当组件需要将未在子组件中显式声明的事件监听器透传给内部元素或组件，如通过 v-on="$listeners" 将事件监听传递给根元素。
- 【回答框架 3】在 Vue 2 中，这些属性常用于创建灵活的包装组件，避免显式声明所有 prop 和事件。在 Vue 3 中，listeners 被合并到 attrs 中，事件监听器也会作为 attrs 的一部分，因此使用方式有所变化。
- 【关键点 1】attrs 用于透传非 prop 的 attribute，实现属性继承。
- 【关键点 2】listeners 用于透传事件监听器，使组件更灵活。
- 【关键点 3】Vue 3 中 listeners 合并到 attrs，事件监听也通过 attrs 传递。
- 【易错点 1】混淆 attrs 与 props 的用途，错误地将所有属性视为 props 导致额外声明。
- 【易错点 2】忽略 class 和 style 默认绑定到根元素，使用 $attrs 时需注意。
- 【易错点 3】在 Vue 3 中仍然沿用 $listeners 导致兼容问题。