Vue3中如何结合$attrs与自定义属性且保留事件监听功能？

在Vue3中，要实现绑定$attrs同时保留自定义aria属性且不丢失事件监听，推荐使用Vue官方提供的mergeProps工具函数，它能正确处理属性、事件以及特殊属性（如class、style）的合并，避免普通对象展开带来的问题。

步骤1：导入mergeProps #

在<script setup>中从vue导入所需工具：

import { computed, mergeProps } from 'vue'

步骤2：修改计算属性合并逻辑 #

用mergeProps将$attrs和自定义aria属性合并，自定义属性放在第二个参数位置，确保其优先级高于$attrs中的同名属性：

const inputAttributes = computed(() => {
  return mergeProps(
    $attrs,
    {
      'aria-required': props.required,
      'aria-invalid': !!props.errorMessage,
    }
  )
})

说明 #

• mergeProps会完整保留$attrs中的所有内容（包括事件监听），同时将自定义的aria属性合并进去，若$attrs中存在同名aria属性，自定义设置会覆盖它。
• 模板无需修改，依然通过v-bind="inputAttributes"绑定属性，如需给多个元素添加相同属性，直接复用这个计算属性即可，避免重复编写合并逻辑。
• 无需修改inheritAttrs配置（默认值true即可），即使设置为false，$attrs仍会包含未被props接收的属性和事件，不影响手动绑定。

内容的提问来源于stack exchange，提问作者Matej