vue3 + ts中,element-plus组件通过ref引用组件内方法,显示提示

在vue3 + ts 项目中,我们通过ref引用element-plus组件内部方法时,编辑器没有提示信息,通常我们都是如下写法
在这里插入图片描述
这里想进行一下表单校验,需要引用el-form组件中的validate方法,从这里可以看出是没有给相应的提示信息的。这是因为 ref() 没有指定泛型,没有呢指定泛型,ts就默认为泛型类型就是 any,对于 any 任意类型,是无法给出提示的。
所以这里就需要指定一下泛型类型。
在这里插入图片描述
就会想到直接用element-plus提供的类型,就有了上述代码,但是ElForm是一个值,不是一个类型,根据错误提示,就可以用 typeof 去获取类型。
在这里插入图片描述
但是这样还是没有给出想要的提示信息。给出的组件实例内部方法
在这里插入图片描述
这里需要理解什么是模板(或class或构造器),什么是实例

// 这是一个 class
class A {}
// 这是一个实例
const a = new A();

而 ElForm 是一个模板,ElForm在template中应用出来的是一个组件实例,所以这里的泛型类型应该是一个组件实例。所以需要用ts提供的一个内置类型操作符InstanceType,用InstanceType进行封装一下,如下
在这里插入图片描述
这是就可以正确提示出来了。
封装成一个公共方法

/**
* T extends abstract new (...args: any) => any:对 T 进行一个约束,只有类才有实例
* _comp: T 泛型的类型引导,_ 表示,告诉编译器并不需要
*/
function useCompRef<T extends abstract new (...args: any) => any>(_comp: T) {
  return ref<InstanceType<T>>();
}

在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值