vue3 ts slot穿透

Vue3中的ts slot穿透是通过使用`useSlots()`这个API来实现的。首先，我们需要在父组件中定义插槽，并将插槽信息传递给子组件。在子组件中，我们使用`v-slot:[key]="{ record, rowIndex, column }"`来接收父组件传递的插槽信息，并将其透传给我们自己定义的插槽。具体的代码示例如下：

<template>
  <a-table row-key="id" :loading="loading" :pagination="pagination" :columns="(cloneColumns as TableColumnData[])" :data="tableData" :bordered="false" :size="size" @page-change="onPageChange">
    <!-- key 就是 slotName -->
    <template v-for="(item, key, i) in slots" :key="i" v-slot:[key]="{ record, rowIndex, column }">
      <slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
    </template>
  </a-table>
</template>

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

const slots = useSlots();
</script>

在上述代码中，我们使用`useSlots()`来获取父组件传递的插槽信息，并保存在`slots`变量中。然后，我们通过`v-for`指令遍历`slots`对象，并使用`v-slot:[key]`来接收父组件传递的插槽信息。最后，我们将插槽信息透传给我们自己定义的插槽。