如何在 defineComponent 中定义 slot 的泛型？

[sixdjango]

Vue version

3.34

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-gpqdjq?file=src%2Fcomponents%2FTsxGenericSlot.tsx

Steps to reproduce

如何在 tsx 中把泛型传递给 slot 的定义中呢？按照官方教程也只能是在 function component 中定义 泛型。作用域无法到达 slots option 这里所以应该怎么写才能在 defineComponents 中对 slots type 进行泛型

export default defineComponent({
  emits: {
    sendMessage: (value: string) => typeof value === 'string',
  },

  // how to generic this type
  slots: Object as SlotsType<{
    default: { foo: string; bar: number };  // i want : default: { foo: T; bar: number };
    item: { data: number };
  }>,

  setup(props: Props, { expose, emit, slots }) {
    expose({
      dd: 'dd',
    });
    return () => (
      <div>
        <div>{slots.default?.({ foo: '', bar: 1 })}</div>
      </div>
    );
  },
});

What is expected?

slots: Object as SlotsType<{
    default: { foo: string; bar: number };  // i want : default: { foo: T; bar: number };
    item: { data: number };
  }>,

What is actually happening?

无法实现 defineComponent 中对 slots 的泛型支持

System Info

No response

Any additional comments?

No response

[sixdjango]

i know how to write template generic
as:

<script setup lang="tsx" generic="T extends string | number, U extends {a:string}">
defineProps<{
  id: T
  list: U[]
}>()

defineSlots<{
  default: (props: { item: U }) => VNode
}>()
</script>

[catpigdog]

楼主找到办法了吗，我也遇到这个问题，现在只能用script setup来处理了...

[jvyouya]

同问同问，很痛苦

[BoYuanSu]

岔題問個問題，樓主使用 defineComponent 時，slots 型別宣告的方式，在官方文件哪邊有提過嗎？

[BoYuanSu]

找到了 https://cn.vuejs.org/api/options-rendering.html#slots

[sixdjango]

所以我想知道 defineComponent 里如何实现 slot 泛型 像 template 里一样

[Niubility-SunLight]

找到解决办法了么，我也遇到了，书写的时候没有类型提示

[baiwusanyu-c]

这样呢？

[sixdjango]

你这个属于写死泛型 string， 不是期望的写法

[baiwusanyu-c]

那你对 defineComponent 封一层呗

[sixdjango]

所以问题就在于，声明的时候 T 从哪里来。是否可以根据传进来的某个泛型 props, 去推到出 Slot 的参数泛型