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>>();
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/12755.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript对象的声明

JS声明对象的语法 1 通过new Object()直接创建对象2 通过 { }形式创建对象 1 通过new Object()直接创建对象 代码 var person new Object(); // 给对象添加属性并赋值 person.name"张小明"; person.age10; person.foods["苹果","橘子","香…

基于多传感器的智能小区安防系统设计与实现-设计说明书

设计摘要&#xff1a; 本设计是基于多传感器的智能小区安防系统的设计与实现。系统主要包括烟雾和温度传感器、人体红外传感器、OLED显示屏、WiFi模块和按键控制等组件。通过这些组件的协作&#xff0c;实现了火灾检测、人员监测、数据显示和远程控制等功能。 首先&#xff0…

Git—常用命令

官方 Git - Book (git-scm.com) 常用命令 命令作用git config --global user.name 用户名设置用户作者git config --global user.email 邮箱设置用户邮箱 git init初始化本地仓库git status查看本地仓库状态 git add 文件名 添加到暂存区git commit -m "提交日志…

Unity使用sherpa-onnx实现离线语音合成

sherpa-onnx https://github.com/k2-fsa/sherpa-onnx 相关dll和lib库拷进Unity&#xff0c;官方示例代码稍作修改 using SherpaOnnx; using System; using System.IO; using System.Runtime.InteropServices; using UnityEngine;public class TTS : MonoBehaviour {public st…

【C++】vector的底层原理讲解及其实现

目录 一、认识vector底层结构 二、初始化vector的函数 构造函数拷贝构造赋值构造initializer_list构造迭代器区间构造 三、迭代器 四、数据的访问 五、容量相关的函数 六、关于数据的增删查改操作 一、认识vector底层结构 STL库中实现vector其实是用三个指针来完成的&#x…

Promise 还能这样理解呀!

目录&#xff1a; 1、Promise是什么 2、Promise三种状态 3、Promise如何使用 4、Promise作用

一种快速提升文件传输速度的方法

在面对网络条件不理想时&#xff0c;进行文件传输往往会导致传输速率的显著下降。为了克服这一难题&#xff0c;镭速软件特别引入了一系列创新的设置选项&#xff0c;旨在显著提升文件传输速率。通过这些优化措施&#xff0c;用户即使在网络不佳的情况下&#xff0c;也能享受到…

机器人工具箱学习(三)

一、动力学方程 机器人的动力学公式描述如下&#xff1a; 式中&#xff0c; τ \boldsymbol{\tau} τ表示关节驱动力矩矢量&#xff1b; q , q ˙ , q \boldsymbol{q} ,\; \dot{\boldsymbol { q }} ,\; \ddot{\boldsymbol { q }} q,q˙​,q​分别为广义的关节位置、速度和加速…

uniapp如何打包预约上门按摩APP

uniapp如何打包预约上门按摩APP&#xff1f; 开发工具&#xff1a;HBuilderX 一、创建移动应用 1、 点击此处微信开放平台 2、点击【管理中心 - 移动应用 - 创建移动应用】填写资料后等待审核 app运行流程图 签名如何获取&#xff1a; 1&#xff09;先把打包好的app安装在手…

java多线程——线程池

概述 线程池是管理java线程生命周期的工具 降低资源消耗。通过池化技术能够重复利用已创建的线程&#xff0c;降低线程频繁创建和销毁造成的资源消耗提高线程的可管理性。无需程序员手动销毁线程&#xff0c;控制线程创建的数量&#xff0c;避免无限制的创建影响系统稳定性 …

OpenHarmony上移植memtester

1. 下载源码&#xff1a; wget https://pyropus.ca./software/memtester/old-versions/memtester-4.6.0.tar.gz 2. 解压并指定交叉编译方式 解压 tar -xvf memtester-4.6.0.tar.gz 修改conf-cc和conf-ld&#xff0c;指定交叉编译方式 conf-cc conf-ld 3. 编译 直接运行m…

Stable Diffusion入门使用技巧及个人实例分享--大模型及lora篇

大家好&#xff0c;近期使用Stable Diffusion比较多&#xff0c;积累整理了一些内容&#xff0c;得空分享给大家。如果你近期正好在关注AI绘画领域&#xff0c;可以看看哦。 本文比较适合已经解决了安装问题&#xff0c;&#xff08;没有安装的在文末领取&#xff09; 在寻找合…

分布式搜索——ElasticSeach简介

一般都用数据库存储数据&#xff0c;然后对数据库进行查询获取数据&#xff0c;但是当数据量很大时&#xff0c;查询效率就会很慢&#xff08;具体下面会讲到&#xff09;&#xff0c;所以这种情况下就会使用到ElasticSeach ElasticSeach的基本介绍 ElasticSeach是一 款非常强…

杰发科技AC7801——ADC之Bandgap和内部温度计算

0. 参考 电流模架构Bandgap设计与仿真 bandgap的理解&#xff08;内部带隙电压基准&#xff09; ​ ​ 虽然看不懂这些公式&#xff0c;但是比较重要的一句应该是这个&#xff1a;因为传统带隙基准的输出值为1.2V ​ 1. 使用 参考示例代码。 40002000是falsh控制器寄…

NXP RT1176(一)——二级BootLoader开发(安全引导加载程序SBL)

目录 1. 开发环境 2. 二级BOOT的功能 3. 步骤 3.1 配置源码 3.2 构建项目 3.2.1 MDK 3.2.2 IAR&#xff08;IAR也编译一下工程看看&#xff0c;这样两个平台都可以支持了&#xff09; 单核M7的开发&#xff01;&#xff01; 1. 开发环境 本文Windows下开发&#xff1a;…

MHD、MQA、GQA注意力机制详解

MHD、MQA、GQA注意力机制详解 注意力机制详解及代码前言&#xff1a;MHAMQAGQA 注意力机制详解及代码 前言&#xff1a; 自回归解码器推理是 Transformer 模型的 一个严重瓶颈&#xff0c;因为在每个解码步骤中加 载解码器权重以及所有注意键和值会产生 内存带宽开销 下图为三…

【合成孔径雷达】合成孔径雷达的多视角理解和时/频成像算法的统一解释

文章目录 一、什么是雷达成像&#xff08;1&#xff09;主要的遥感探测手段&#xff1a;光学、红外和雷达&#xff08;2&#xff09;从数学的角度&#xff1a;雷达成像主要研究什么&#xff1f;数据采集&#xff1a; y T x n yTxn yTxn信息提取&#xff1a; y − > x ? y…

编译错误:stray ‘\357’ in program的解决方法

目录 把报错文件更换编码格式&#xff0c;我试的utf-8 bom编码就可以了&#xff0c;可以多换几种试试。 网友的另一种案例&#xff1a; 编译错误&#xff1a;stray ‘\357’ in program的解决方法 把报错文件更换编码格式&#xff0c;我试的utf-8 bom编码就可以了&#xff0c…

如何同步管理1000个设备的VLAN数据?

什么是VLAN&#xff1f; VLAN&#xff0c;也就是虚拟局域网&#xff0c;是通过为子网提供数据链路连接来抽象出局域网的概念。在企业网中&#xff0c;一个企业级交换机一般是24口或者是48口&#xff0c;连接这些接口的终端在物理上形成一个广播域。广播域过大&#xff0c;就会导…

【AI智能体】零代码构建AI应用,全网都在喊话歌手谁能应战,一键AI制作歌手信息查询应用

欢迎来到《小5讲堂》 这是《文心智能体平台》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 文心智能体大赛背景创建应用平台地址快速构建【基础配置】…