Kinght的小屋

Appearance

声明 ref 获取到的组件实例类型 ​

​ 有时候自己定义的组件，在使用时，通过 ref 想要获取到组件实例读取组件暴露出来的属性，但是想要定义组件实例的类型却不知道无从下手，就会导致 ts 推论错误。

​ 其实组件实例的属性和你 defineExpose 时传入的参数是一样的，你暴露出了那些属性，在通过 ref 获取到组件实例时，组件实例上的属性和 defineExpose 传入的参数是一致的。

​ defineExpose 也可以传入泛型达到编译时声明暴露的成员，所以只需要定义需要暴露的 API 的类型即可实现定义组件实例的类型。在外部使用时，引入该类型即可完成对 ref 类型的声明。

例如 ​

定义 ​

提前声明组件暴露出去的 API 类型

ts
export interface CompInst {
  reset: () => void;
}
export interface CompInst {
  reset: () => void;
}

defineExpose 使用 ​

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

defineExpose<CompInst>({
  reset() {
    console.log("ok");
  },
});
</script>
<script setup lang="ts">
import { CompInst } from "vue";

defineExpose<CompInst>({
  reset() {
    console.log("ok");
  },
});
</script>

使用该组件 ​

vue
<script setup lang="ts">
import { ref } from "vue";
import type { CompInst } from "..";

const compInst = ref<CompInst | null>(null);
</script>

<template>
  <comp ref="compInst" />
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { CompInst } from "..";

const compInst = ref<CompInst | null>(null);
</script>

<template>
  <comp ref="compInst" />
</template>