Vue$attrs与$listeners怎么用？搞懂组件传参就这么简单

深入理解Vue组件传参：$attrs与$listeners的妙用。在Vue开发中，$attrs和$listeners是两个实用却易被忽视的实例属性，尤其在组件通信和封装高阶组件时发挥关键作用。$attrs对象包含父组件传递给子组件，但未在props中声明的所有属性，常用于透传属性到底层元素，避免手动透传。$listeners对象则包含父组件绑定在子组件上的所有事件监听器，用于透传事件。Vue 3中，$listeners已合并进$attrs，事件以onXxx形式存在，通过v-bind="$attrs"即可同时绑定属性与事件。掌握这两个属性，能有效提升组件封装的灵活性和简洁性，避免props泛滥，简化事件转发逻辑。本文将深入探讨$attrs和$listeners的用法、常见用途以及Vue 3中的变化，助你写出更高效的Vue组件。

$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>
  &lt;input type=&quot;text&quot; v-bind=&quot;$attrs&quot;&gt;
</template>

父组件这样使用它：

<MyInput placeholder="请输入内容" class="form-control" />

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

常见用途：

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

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

什么是 $listeners？

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

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

<template>
  &lt;input type=&quot;text&quot; v-on=&quot;$listeners&quot;&gt;
</template>

父组件监听了 @input：

<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>
  &lt;input v-bind=&quot;$attrs&quot; v-on=&quot;$listeners&quot; /&gt;
</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" 就可以同时绑定属性和事件。

基本上就这些。这两个属性虽然看起来简单，但在做组件抽象或封装时非常实用，理解它们能让你写出更灵活、更简洁的组件逻辑。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。