在日常开发中,肯定会遇到需要使用ref来获取组件实例的情况:

<template>
  <div class="test">
    <MyDialog ref="MyDialogRef"/>
  </div>
</template>

<script setup lang="ts">
import MyDialog from "./MyDialog.vue";

const MyDialogRef = ref();
</script>

如果只是这样写,我们获取的ref组件实例是一个any类型,如果子组件通过defineExpose对外抛出了接口,显然在父组件中是没法感知到的,为此我们需要一个准确的类型。

利用vue官方提供的InstanceType类型来准确识别组件类型:

<template>
  <div class="test">
    <MyDialog ref="MyDialogRef"/>
  </div>
</template>

<script setup lang="ts">
import MyDialog from "./MyDialog.vue";
import type { InstanceType } from "vue";

const MyDialogRef = ref<InstanceType<typeof MyDialog | null>>(null);
</script>

此时就可以准确获取到组件类型了。

分类: vue 开发实战 标签: vueref组件类型InstanceType

评论