Vue3+TypeScript：无需传参获取父组件Props正确类型的方法

安全阿岳

2026-7-10

解决Vue自定义表格组件中CustomRow获取父组件数据类型问题

1. 用泛型约束父组件Props并通过插槽传递类型

在CustomTable组件中定义泛型，明确data的类型，再通过插槽将类型传递给CustomRow，这是最符合Vue组件设计规范的方式：

<!-- CustomTable.vue -->
<script setup lang="ts" generic="T">
import { defineProps } from 'vue'

// 用泛型T约束data的类型
const props = defineProps<{
  data: T[]
}>()
</script>

<template>
  <table>
    <slot name="header"></slot>
    <!-- 循环data，将每个row通过插槽传递给CustomRow -->
    <CustomRow v-for="row in data" :key="row.id" v-slot="{ row }">
      <slot name="row" :row="row"></slot>
    </CustomRow>
  </table>
</template>

使用时，someData的类型会自动推导给泛型T，CustomRow的插槽参数row就会拥有正确的类型。如果确实需要在CustomRow中获取整个数据集，也可以通过插槽额外传递：

<!-- 在CustomTable的模板中调整 -->
<CustomRow v-for="row in data" :key="row.id" v-slot="{ row, data }">
  <slot name="row" :row="row" :data="data"></slot>
</CustomRow>

2. 用Provide/Inject配合泛型传递带类型的数据

如果必须在CustomRow中获取整个data数组，可以通过Vue的Provide/Inject机制配合泛型，既保证类型安全，又避免依赖组件实例结构：

<!-- CustomTable.vue -->
<script setup lang="ts" generic="T">
import { defineProps, provide } from 'vue'

const props = defineProps<{
  data: T[]
}>()

// 提供带泛型类型的data
provide('tableData', props.data)
</script>

<!-- CustomRow.vue -->
<script setup lang="ts" generic="T">
import { inject } from 'vue'

// 注入时指定泛型类型，自动继承父组件的T类型
const data = inject<T[]>('tableData')
</script>