Vue3组件封装：如何让Wrapper组件继承原组件特性并获WebStorm提示

问题背景 #

需要封装A.vue为B.vue组件，要求B.vue完全继承A.vue的所有插槽、Props、v-model绑定、事件及暴露值，同时在WebStorm中具备完整智能提示。当前遇到的问题：

• 通过defineProps<AProps>()继承Props类型，但循环渲染插槽时WebStorm报未知插槽警告
• 使用v-bind="$attrs"和v-bind.prop="$props"绑定后，无v-model等代码提示
• 需为不同版本的B.vue设置不同默认插槽内容，无法通过插槽默认值实现

核心实现方案 #

1. 提取A.vue的类型定义 #

先在A.vue中导出所有需要继承的类型，让B.vue能复用这些类型定义：

<!-- A.vue -->
<template>
    <div>
        <slot />
        <button @click="$emit('customEvent')">
            Emits a custom event
        </button>
        <div>
            <slot name="label" :data="someData" />
            <input v-model="customModel" type="text">
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const someData = ref<string>('data')
const customModel = defineModel<string>('something')

const emit = defineEmits<{
    customEvent: [],
}>()

// 导出Props类型（若A有自定义Props，需用typeof导出）
// 示例：const props = defineProps<{ /* Props定义 */ }>()
// export type AProps = typeof props

// 导出插槽类型，匹配A的插槽结构
export type ASlots = {
    default: () => any
    label: (props: { data: string }) => any
}

// 导出事件类型
export type AEmits = typeof emit

// 导出组件暴露的属性
export const exposed = { someData }
export type AExposed = typeof exposed
</script>

2. 重构B.vue实现完整继承与智能提示 #

修改B.vue，通过类型关联、明确传递属性和插槽，解决智能提示和插槽警告问题：

<!-- B.vue -->
<template>
    <A 
        ref="aRef"
        v-bind="$props"
        v-bind="$attrs"
    >
        <!-- 自定义默认插槽内容，根据version动态切换 -->
        <template #default>
            <template v-if="version === 'v1'">
                <div>B组件v1默认内容</div>
                <slot />
            </template>
            <template v-else-if="version === 'v2'">
                <div>B组件v2默认内容</div>
                <slot />
            </template>
            <template v-else>
                <slot />
            </template>
        </template>

        <!-- 明确传递命名插槽，解决WebStorm警告 -->
        <template #label="slotData">
            <slot name="label" v-bind="slotData" />
        </template>

        <!-- 处理剩余动态插槽 -->
        <template 
            v-for="(_, name) in Object.keys($slots)" 
            v-if="name !== 'default' && name !== 'label'"
            #[name]="slotData"
        >
            <slot :name="name" v-bind="slotData" />
        </template>
    </A>
</template>

<script lang="ts" setup>
import A, { AProps, AEmits, ASlots, AExposed } from './A.vue'

// 继承A的Props，同时添加B自身的版本控制Props
const props = defineProps<Omit<AProps, 'anyPropToOverride'> & {
    version?: 'v1' | 'v2'
}>()

// 继承A的事件类型
const emit = defineEmits<AEmits>()

// 定义插槽类型，让WebStorm识别A的插槽
defineSlots<ASlots>()

// 继承A暴露的属性
const aRef = ref<InstanceType<typeof A>>()
defineExpose({
    ...aRef.value,
    // 可添加B自身的暴露属性
})
</script>

3. 关键问题解决说明 #

• WebStorm插槽警告：明确写出已知命名插槽（如#label），剩余动态插槽添加过滤条件，同时通过defineSlots<ASlots>()让IDE识别插槽类型
• v-model智能提示：通过类型关联AProps和defineModel的类型，结合v-bind="$props"自动传递modelValue和update:modelValue，WebStorm会自动识别v-model的类型提示

更优封装方案总结 #

1. 类型驱动继承：复用A.vue导出的所有类型，避免重复编写，保证智能提示准确性
2. 分层处理插槽：单独处理需要自定义默认内容的插槽，其他插槽统一传递，兼顾自定义需求与完整性
3. 完整属性传递：使用v-bind="$props"和v-bind="$attrs"自动传递所有Props和透传属性，无需手动列举
4. 响应式版本控制：将版本作为B的Props，动态切换默认插槽内容，符合Vue响应式逻辑，易于维护

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