如何提取Vuetify组件Props并封装自定义组件？

核心方案：利用Vuetify官方工具函数 #

Vuetify提供了defineVuetifyComponent工具，专门用于组件封装场景，可直接继承基础组件的所有Props、插槽与事件，完全规避VuedefineProps的类型解析限制。

具体实现（选项式写法） #

import { defineVuetifyComponent } from 'vuetify/components';
import VTextField from 'vuetify/components/VTextField/VTextField';

export default defineVuetifyComponent({
  inheritAttrs: false, // Vuetify组件封装推荐配置，避免属性冲突
  components: { VTextField },
  props: {
    // 直接添加自定义Props，不会覆盖VTextField原有属性
    customLabel: {
      type: String,
      default: ''
    }
  },
  setup(props, ctx) {
    return () => h(VTextField, {
      ...ctx.attrs, // 透传所有继承的Props与外部属性
      label: props.customLabel || ctx.attrs.label
    }, ctx.slots)
  }
});

简化版（script setup兼容写法） #

如果偏好<script setup>，可通过useAttrs实现属性透传，无需显式声明复杂类型：

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

const attrs = useAttrs();
// 自定义Props直接声明，与VTextField属性自动兼容
const props = defineProps({
  customLabel: {
    type: String,
    default: ''
  }
});
</script>

<template>
  <VTextField
    v-bind="attrs"
    :label="customLabel || attrs.label"
  >
    <template v-for="(_, slot) in $slots" #[slot]="data">
      <slot :name="slot" v-bind="data" />
    </template>
  </VTextField>
</template>

错误原因说明 #

Vue的defineProps在编译阶段需要明确的静态类型定义，无法解析InstanceType或ExtractPropTypes这类依赖运行时实例的工具类型；同时Vuetify未对外导出组件Props的类型定义，因此触发Vite编译错误。上述方案通过组件继承或属性透传绕开了类型解析环节，直接实现Props兼容。

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