Vue 3 - 如何使用 typescript 将组件包装在 Vue 中

Question

我正在尝试包装 PrimeVue 组件（日历），稍微更改其样式，然后再次导出。

反应中类似以下内容：

const WrappedCalendar: React.FC<CalendarProps> = (props)=> 
<div style={{background:'green'}}>
    <Calendar {...props}/>
</div>

但是，我无法做到这一点，因为我不断收到打字稿错误。 我尝试创建一个组件并从 primeVues Calendar 扩展，但这也失败了。

以下是我尝试过的一个简单示例，即使这样也不适用于打字稿并且行为不正确。

<script setup lang="ts">
import Calendar, { CalendarProps, CalendarSlots } from 'primevue/calendar';
import { defineProps, h, } from 'vue'

const props = defineProps<CalendarProps>()
const slots = defineSlots<CalendarSlots>() 
const CalendarFC = () => {
  return h(Calendar, props, slots)
}
</script>
<template>
  <div :style="{ background: 'green' }">
      <CalendarFC></CalendarFC>
  </div>
</template>

是否有任何简单的方法来包装组件，以便新组件可以与原始组件使用相同的 props/emits/slots 并使打字稿表现相同？

Answer 1

我测试了下面的代码，它工作正常。该问题可能与 PrimeVue 有关。

或者，使用 JSX/TSX 来完成此任务会更方便。您可以在官方 Vue.js 文档中找到更多信息。

TestChild.vue

<template>
  <div>
    {{ testProp }}
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { defineSlots, defineProps } from 'vue';
import type { Props, Slots } from './shared.type.ts';

defineProps<Props>();
defineSlots<Slots>();
</script>

共享.type.ts

export interface Props {
  testProp: string;
}
export interface Slots {
  default(): any;
}

TestParent.vue

<template>
  <TestChildWrap />
</template>

<script setup lang="ts">
import { defineSlots, defineProps, h } from 'vue';
import TestChild from './TestChild.vue';
import type { Props, Slots } from './shared.type.ts';

const props = defineProps<Props>();
const slots = defineSlots<Slots>();

const TestChildWrap = () => {
  return h(TestChild, { ...props }, slots);
};
</script>