Vue3封装Vuetify v-btn组件：实现属性继承与IDE自动补全

要让封装的MyButton继承v-btn全部props且获得IDE自动补全，核心是让TypeScript显式识别v-btn的props类型，以下是具体实现方案：

方案一：显式继承v-btn的Props类型 #

Vuetify组件都提供了对应的Props类型定义，直接导入并通过defineProps声明即可让IDE识别所有属性：

<template>
  <v-btn v-bind="$props">
    <slot />
  </v-btn>
</template>

<script setup lang="ts">
// 导入v-btn的Props类型
import { VBtnProps } from 'vuetify/components/VBtn'

// 继承v-btn所有props，也可在此添加自定义props（如 VBtnProps & { customProp: string }）
const props = defineProps<VBtnProps>()
</script>

方案二：同时处理props与原生HTML属性 #

如果需要支持原生按钮属性（如autofocus、form等原生属性），可结合useAttrs同时传递props和attrs：

<template>
  <v-btn v-bind="{ ...$props, ...$attrs }">
    <slot />
  </v-btn>
</template>

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

const props = defineProps<VBtnProps>()
const attrs = useAttrs()
</script>

原代码问题说明 #

你之前的代码仅通过$attrs传递属性，但未显式声明props类型，IDE无法识别v-btn的props定义，因此无法提供自动补全。通过defineProps指定VBtnProps泛型后，TS会将v-btn的所有props暴露给IDE，从而实现自动补全功能。

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