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
对外抛出了接口,显然在父组件中是没法感知到的,为此我们需要一个准确的类型。
利用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
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
评论