[Vue3] 指定ref类型,优雅地使用ref调用组件方法

·  阅读 3849

一、背景

在使用组件库时,经常需要通过ref获得组件实例,并调用组件上的方法。如el-form组件的validate校验方法,el-table组件的toggleRowSelection等方法。

vue3中使用ts之后,如果没有正确设定ref的类型,调用时就不得不用xxref as any的方式调用组件上的方法了,这样显然十分不优雅。

二、获取组件实例类型

要指明ref的类型,首先需要获取组件实例的类型。 可以通过ts的InstanceType获取

// 以ElForm的实例类型为例
import { ElForm, ElTable } from "element-plus";
export type ElFormInstance = InstanceType<typeof ElForm>;
复制代码

三、指定ref类型

vue3中的ref可以接受泛型指定具体的实例类型,这样在使用时就可以自动带出该组件实例上的方法了

<script lang="ts" setup>
// 指定ref类型
const formRef = ref<ElFormInstance | null>(null)

// 提交表单
const submitForm = ()=>{
    // 先校验
    formRef.value && formRef.value.validate((isValid?:boolean)=>{
        if(isValid){
            //校验通过 dosomething
        }
    })
}
</script>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改