vue3中正确设置ref获取的组件ts类型
在日常开发中，肯定会遇到需要使用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对外抛出了接口，显然在父组件中是没法感知到的，为此我们需要一个准确的类型。
利用TypeScript提供的InstanceType类型来准确识别组件类型：
<template>
<div class="test">
<MyDialog ref="MyDialogRef"/>
</div>
</template>
<script setup lang="ts">
import MyDialog from "./MyDialog.vue";
const MyDialogRef = ref<InstanceType<typeof MyDialog | null>>(null);
</script>此时就可以准确获取到组件类型了。
分类：
vue 开发实战
标签：
vueref组件类型InstanceType
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 10
随便看看
Google Chrome MacOSInstanceType并不是vue官方提供的。
我在使用import type { InstanceType } from "vue";时报错vue没有导出该类型，去官方文档看了发现是ts自带的工具类型，希望博主改下内容
随便看看
Google Chrome MacOS木灵鱼儿
FireFox Windows 10随便看看
Google Chrome MacOS木灵鱼儿
FireFox Windows 10随便看看
Google Chrome MacOSFan
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10Fan
Google Chrome Windows 10Fan
Google Chrome Windows 10const MyDialogRef = ref(null)
应该为
const MyDialogRef = ref(null)