Vuetify 3组件封装问题：默认Props无法被外部传入Props覆盖

数据老陈

2026-7-27

问题解决：自定义Vuetify组件Props覆盖优先级调整

核心问题原因

你当前的v-bind对象展开顺序错误，导致默认Props覆盖了用户传入的Props：

// 错误顺序：defaultProps在最后，会覆盖前面的$props和$attrs
v-bind="{ ...$attrs, ...$props, ...defaultProps }"

对象展开时，后面的属性会覆盖前面的同名属性，所以默认Props的优先级高于用户传入的值，自然无法被覆盖。

解决方案

1. 调整v-bind展开顺序

将默认Props放在最前面，让用户传入的$props和$attrs依次覆盖默认值：

<v-text-field v-bind="{ ...defaultProps, ...$props, ...$attrs }">

优先级逻辑：默认Props（最低）→ 用户传入的组件Props → 用户传入的非Props属性（如persistentCounter），确保用户传入的所有属性都能生效。

2. 简化插槽代码（可选优化）

原插槽写法存在重复，可合并为一个循环处理所有插槽（包括作用域插槽）：

<template v-for="(_, slotName) in $slots" #[slotName]="slotData">
  <slot :name="slotName" v-bind="slotData" />
</template>

修改后的完整组件代码

<template>
  <label v-if="name">{{ name }}</label>
  <v-text-field v-bind="{ ...defaultProps, ...$props, ...$attrs }">
    <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
      <slot :name="slotName" v-bind="slotData" />
    </template>
  </v-text-field>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { VTextField } from 'vuetify/components/VTextField';

export default defineComponent({
  name: 'EmailField',
  extends: VTextField,
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  computed: {
    defaultProps() {
      return {
        color: 'yellow',
        bgColor: '#252836',
        variant: 'outlined',
        density: 'compact'
      };
    }
  }
});
</script>