当前位置： 技术文章>> Vue 中如何使用 $attrs 和 $listeners 传递非 props 属性？

文章标题：Vue 中如何使用 $attrs 和 $listeners 传递非 props 属性？
  • 文章分类: 后端
  • 5012 阅读

在Vue.js框架中，组件间的通信是一个重要且常见的需求。Vue提供了多种方式来实现组件间的数据传递，包括props、events、Vuex等。然而，在某些场景下，你可能希望父组件能够向子组件传递一些非prop的属性，或者监听子组件触发的一些未在组件内部显式声明的事件。这时，Vue的$attrs和$listeners属性就显得尤为有用。

$attrs 与 $listeners 的基本概念

首先，让我们明确$attrs和$listeners的作用和区别。

  • $attrs：包含了父作用域中不作为prop被识别(且获取)的绑定属性(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高阶组件时非常有用。

  • $listeners：包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以让子组件继承父组件的事件监听器。通过v-on="$listeners"，子组件可以触发在父组件上定义的事件。

使用场景

场景一：高阶组件（HOCs）

高阶组件是一种接受一个或多个组件作为参数，并返回一个新组件的组件。在创建高阶组件时，我们可能需要将父组件传递的所有非prop属性以及事件监听器传递给内部组件。这时，$attrs和$listeners就派上了用场。

示例：

假设我们有一个BaseButton组件，它接收一些基本的props如type和size，但我们还希望它能够接收任意其他属性（如data-*自定义属性）和事件监听器。我们可以创建一个高阶组件EnhancedButton来包装BaseButton，并使用$attrs和$listeners来传递这些属性和事件。

<!-- BaseButton.vue -->
<template>
  <button :class="`btn btn-${type} btn-${size}`" v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: ['type', 'size']
}
</script>

<!-- EnhancedButton.vue -->
<template>
  <BaseButton 
    :type="type" 
    :size="size" 
    v-bind="$attrs" 
    v-on="$listeners">
    <!-- 可以在这里添加额外的逻辑或内容 -->
    <slot></slot>
  </BaseButton>
</template>

<script>
import BaseButton from './BaseButton.vue';

export default {
  components: { BaseButton },
  props: ['type', 'size'] // 可以根据需要添加或删除props
}
</script>

在上面的例子中，EnhancedButton组件接受任意数量的属性和事件监听器，并将它们全部传递给BaseButton组件。这样，父组件就可以直接对EnhancedButton进行配置，而无需担心内部是如何实现的。

场景二：组件库扩展

在开发或扩展Vue组件库时，我们经常需要让组件能够接收和响应来自父组件的未知属性和事件。通过$attrs和$listeners，我们可以轻松实现这一功能，同时保持组件的灵活性和可扩展性。

示例：

假设我们正在开发一个基于Vue的UI库，并希望其中一个组件CustomInput能够接收任意HTML属性（如placeholder、maxlength等）和事件监听器（如input、blur等）。

<!-- CustomInput.vue -->
<template>
  <input
    type="text"
    v-bind="$attrs"
    v-on="$listeners"
    class="custom-input"
  />
</template>

<script>
export default {
  // 无需定义任何props
}
</script>

<style scoped>
.custom-input {
  /* 自定义样式 */
}
</style>

在这个例子中，CustomInput组件使用了v-bind="$attrs"来接收所有父组件传递的属性，并使用v-on="$listeners"来接收所有父组件传递的事件监听器。这样，父组件就可以像使用原生HTML元素一样使用CustomInput组件，同时享受Vue组件的响应性和复用性。

注意事项

  1. 避免滥用：虽然$attrs和$listeners提供了很大的灵活性，但过度使用可能会导致组件之间的界限变得模糊，降低组件的可维护性和可测试性。因此，在使用时应该权衡利弊，确保它们的使用是必要且合理的。

  2. 版本兼容性：Vue 2.4.0+ 引入了$attrs和$listeners属性。如果你正在使用更早版本的Vue，那么这些特性将不可用。

  3. 与inheritAttrs的配合使用：默认情况下，父作用域的不被认作props的attribute绑定（也就是$attrs中的属性）将会“回退”且作为普通的HTML attribute应用在子组件的根元素上。如果你不希望这些属性出现在子组件的根元素上，你可以在子组件中设置inheritAttrs: false。这样，这些属性就不会被添加到根元素上，但你可以通过$attrs来访问它们。

结语

$attrs和$listeners是Vue提供的一组非常有用的API，它们允许我们在组件间灵活地传递属性和事件监听器。通过合理使用这两个API，我们可以创建出更加灵活、可扩展且易于维护的Vue组件。在开发Vue应用或组件库时，不妨考虑将这两个API纳入你的工具箱中，以便在需要时能够迅速应对各种复杂的组件间通信场景。

在探索Vue的无限可能时，别忘了关注“码小课”网站，那里有更多关于Vue.js的深度解析和实战案例，帮助你更好地掌握Vue技术，提升你的前端开发能力。

推荐文章