Vue的$attrs和$listeners的作用是什么？

$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" />

那 placeholder 和 class 都会被包含在 $attrs 中，然后通过 v-bind="$attrs" 直接绑定到 <input> 元素上。

常见用途：封装可复用的基础组件时，比如输入框、按钮等，用于将所有未显式处理的属性直接应用到底层元素上。在组合组件结构时避免手动透传一堆属性。

⚠️ 注意：如果某个属性已经在 props 中定义了，它就不会出现在 $attrs 中。

什么是 $listeners？

$listeners 是一个对象，包含了父组件绑定在当前组件上的所有监听的事件。它通常用来将子组件的事件原样传递给更内层的元素。

比如你写了一个包装组件：

<template>
  <input type="text" v-on="$listeners">
</template>

父组件监听了 @input：

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

37

查看详情

<MyInput @input="handleInput" />

那么这个 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的$attrs和$listeners的作用是什么？的详细内容，更多请关注php中文网其它相关文章！