当前位置：首页 > news >正文

$attrs 和 $listeners 的使用场景和用法是什么？

news 2025/9/21 5:51:36

$attrs 和 $listeners 是 Vue 中用于简化组件间属性和事件传递的特性，主要解决多级组件嵌套时的透传问题，避免了在中间组件中手动声明大量 props 和事件的冗余代码。

1. 核心作用

$attrs：包含父组件传递给子组件、但未被子组件通过 props 声明的所有属性（class 和 style 除外）。
$listeners：包含父组件传递给子组件的所有事件监听器（不含 .native 修饰符的事件）。

两者的核心价值是实现属性和事件的“透传”，让中间组件无需关心具体数据，直接将父组件的信息传递给深层子组件。

2. 使用场景

当存在多级组件嵌套（如祖父 → 父亲 → 孙子），且祖父组件需要向孙子组件传递属性或事件时：

传统方式：父组件需声明 props 接收祖父的属性，再传递给孙子，代码冗余- 优化方式：父组件通过 v-bind="$attrs" 和 v-on="$listeners" 直接透传，无需手动声明

3. 用法示例

场景：三级组件嵌套（Grandparent → Parent → Child）

祖父组件需要向 Child 组件传递属性和事件，Parent 作为中间组件仅负责透传。

① 子组件（Child.vue）

<template><div><p>子组件接收的属性：{{ name }} - {{ age }}</p><button @click="handleClick">触发事件</button></div>
</template><script>
export default {// 子组件显式声明需要的 propsprops: ['name', 'age'],methods: {handleClick() {// 子组件触发事件this.$emit('child-event', '来自子组件的消息')}}
}
</script>

② 中间组件（Parent.vue）

无需声明 props 和事件，直接用 $attrs 和 $listeners 透传：

<template><div><p>中间组件（仅透传）</p><!-- 透传属性：v-bind="$attrs" --><!-- 透传事件：v-on="$listeners" --><ChildComponent v-bind="$attrs" v-on="$listeners" /></div>
</template><script>
import ChildComponent from './Child.vue'
export default {components: { ChildComponent },// 可选：如果希望 Parent 组件自身不继承 $attrs，可设置 inheritAttrs: false// （默认 true，$attrs 会作为普通 HTML 属性添加到 Parent 组件的根元素上）inheritAttrs: false
}
</script>

③ 祖父组件（Grandparent.vue）

直接向中间组件（Parent）传递属性和事件，最终会透传到 Child：

<template><div><h3>祖父组件</h3><!-- 传递属性（name/age）和事件（child-event）给 Parent --><ParentComponent name="张三" age="20" gender="男"  <!-- Child 未声明的属性，会保留在 $attrs 中 -->@child-event="handleChildEvent"/></div>
</template><script>
import ParentComponent from './Parent.vue'
export default {components: { ParentComponent },methods: {handleChildEvent(msg) {console.log('祖父收到子组件消息：', msg) // 输出：来自子组件的消息}}
}
</script>

4. 关键细节

inheritAttrs 配置：
- 默认 true：$attrs 中的属性会自动添加到组件根元素的 HTML 属性上（可能导致非预期的 HTML 属性）。
- 建议设为 false：避免多余的 HTML 属性，仅通过 v-bind="$attrs" 手动控制透传。
$attrs 不包含的内容：
- 子组件中已通过 props 声明的属性（会被过滤掉）。
- class 和 style（会被合并到组件根元素上，不受 inheritAttrs 影响）。
$listeners 在 Vue 3 中的变化：
- Vue 3 中移除了 $listeners，统一通过 $attrs 传递事件（事件以 onXxx 形式存在于 $attrs 中）。
- Vue 3 中透传写法简化为：<ChildComponent v-bind="$attrs" />（属性和事件一起透传）。