关于ts vue3父子组件通信如何传递泛型的问题？

Question

父组件
...
    <son :config="data"></son>

// 比如父组件有个表格数据类型是
interface ITableData {
  id: number;
  date: string;
  name: string;
  address: string;
}
const data: Array<ITableData> = [
  {id: 1, date: '1', name: '1', address: '1'}
]
...
子组件
...
这个泛型T，如何通过父组件传递给子组件

<table :data="test">
</table>
//这个类型T就必须是父组件的 ITableData 类型
const test: Array<T> =  ...

Answer 1

据我所知，目前应该是没有办法通过 props 传递泛型的。

有一种办法，可以定义一个泛型的方法并 expose 出去，外部的组件可以通过该方法推断泛型。

补充：

如果你使用 <script setup> 的话，可以起一个单独的 ts 文件来存放类型声明，然后在父子组件均从该文件引入类型即可：

Answer 2

在 setup script 中使用 defineProps<T>() 应该可以

<script lang="ts" setup>
import { toRefs } from "vue";
interface Model {
    label: string;
    value: unknown;
}

const props = withDefaults(
    defineProps<{
        rows: Model[]
    }>(),   
    {
        rows: () => []
    }
);

const { rows } = toRefs(props);
</script>

查看演示

Answer 3

vue3 父组件给子组件传递泛型
用template也是可以给子组件传泛型的，可以看下这篇文章，可能会解决你的问题。

Answer 4

官方有解决方案了 https://cn.vuejs.org/api/sfc-script-setup.html#generics

子组件 child.vue

<script setup lang="ts" generic="T">
    defineProps<{
      items: T[]
      selected: T
    }>()
</script>

父组件

<template>
    <Child generic="String" :items="['abc','cdf']" selected="abc"></Child>
<template>