Vue3 + TypeScript 如何封装PrimeVue Calendar组件？

直接通过透明包裹+类型继承的方式就能实现，无需复杂的组件继承操作，完美复用原组件的Props、Emits、Slots及TypeScript类型：

实现代码 #

<template>
  <!-- 用v-bind="$attrs"自动传递所有props与事件，Vue3中$listeners已合并入$attrs -->
  <Calendar v-bind="$attrs" class="custom-calendar" />
</template>

<script setup lang="ts">
import { Calendar } from 'primevue/calendar';
// 导入原组件的Props和Emits类型定义
import type { CalendarProps, CalendarEmits } from 'primevue/calendar';

// 直接继承原组件的Props类型，TS自动完成类型校验
defineProps<CalendarProps>();
// 继承原组件的Emits类型，保证事件类型完全对齐
defineEmits<CalendarEmits>();
</script>

<style scoped>
/* 自定义样式示例，用:deep()穿透PrimeVue组件样式 */
.custom-calendar :deep(.p-inputtext) {
  border-radius: 8px;
  border-color: #42b983;
}

.custom-calendar :deep(.p-datepicker) {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style>

关键说明 #

1. 自动复用Props/Emits/Slots：v-bind="$attrs"会自动传递原组件所有支持的Props和事件，原组件的所有插槽（如header、footer）也可直接在封装后的组件上使用，无需额外配置。
2. 类型完全匹配：直接导入原组件的CalendarProps和CalendarEmits类型传入defineProps/defineEmits，TypeScript会自动继承所有类型校验，和使用原生PrimeVue Calendar组件的类型表现完全一致。
3. 按需扩展：如果需要新增自定义Props或事件，通过交叉类型扩展原类型即可：

// 扩展自定义Props
interface CustomCalendarProps extends CalendarProps {
  customPlaceholder?: string;
}
defineProps<CustomCalendarProps>();

// 扩展自定义事件
interface CustomCalendarEmits extends CalendarEmits {
  (e: 'custom-event', value: string): void;
}
defineEmits<CustomCalendarEmits>();

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