Vue3 Ts 如何获取组件的类型

年纪轻轻只想躺平2024-12-02 21:08

vue3 Ts ref 子组件

1、默认写法

typeof：获取ts类型

InstanceType：获取模版的实例

vue 复制代码

<tempolate>
  <myComponent ref="myCompRef">
</tempolate>

<script setup lang="ts">
import { ref } from "vue"
import myComponent "@/compoments/myComponent"

const myCompRef = ref<InstanceType<typeof myComponent>>()
</script>

2、封装后

abstract：定义抽象类

"_"：命名规范，参数名前添加下划线，表示该参数本身是不使用的，取消参数没有使用的警告

ts 复制代码

import { ref } from "vue"

export function useCompRef<T extends abstract new (...args: any) => any> (_comp: T){
	return ref<InstanceType<T>>()
}

vue 复制代码

<tempolate>
  <myComponent ref="myCompRef">
</tempolate>

<script setup lang="ts">
import { useCompRef } from "@/utils/useCompRef"
import myComponent "@/compoments/myComponent"

const myCompRef = useCompRef(myComponent)
</script>