Vue3里动态插槽的类型该如何定义？

Question

如题。
当前在网上搜也没有相关问题...?

<template>
  <div>
    <header>
      <slot name="header" :disabled="disabled" :loading="loading" :submit="submit"></slot>
      <slot name="header-extra" :disabled="disabled" :loading="loading" :submit="submit"></slot>
    </header>
    <ul>
      <li v-for="column in columns" :key="column.key">
        <slot :name="column.key" :formData="formData"></slot>
      </li>
    </ul>
  </div>
</template>

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

const props = withDefaults(
  defineProps<{
    columns: { key: string; label: string; type: 'slot' | 'input' | 'select' }[]
  }>(),
  {
    columns: () => [],
  },
)

const slots = defineSlots<{
  header(props: { disabled: boolean; loading: boolean; submit: (e: MouseEvent) => void }): void
  ['header-extra'](props: {
    disabled: boolean
    loading: boolean
    submit: (e: MouseEvent) => void
  }): void
  // 该如何编写`动态插槽`的类型呢？
}>()

const disabled = ref(false)
const loading = ref(false)
const formData = ref({})
const submit = (e: MouseEvent) => {}
</script>

Answer 1

需要使用到泛型

playground