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.pswp.cn/diannao/12755.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12755.shtml
英文地址,請注明出處:http://en.pswp.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安裝在手…

uniapp 小程序低功耗藍牙配網 ble配網 物聯網

1.獲取藍牙列表 bleList.vue <template><view><button touchstart"startSearch">獲取藍牙列表</button><scroll-view :scroll-top"scrollTop" scroll-y class"content-pop"><viewclass"bluetoothItem&q…

java多線程——線程池

概述 線程池是管理java線程生命周期的工具 降低資源消耗。通過池化技術能夠重復利用已創建的線程&#xff0c;降低線程頻繁創建和銷毀造成的資源消耗提高線程的可管理性。無需程序員手動銷毀線程&#xff0c;控制線程創建的數量&#xff0c;避免無限制的創建影響系統穩定性 …

找不到kotlin.Pair的類文件

需要添加kotlin的依賴&#xff1a; implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.22"

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…

Ubuntu安裝ZLMediaKit

方式一 1、安裝vcpkg 在Ubuntu上安裝vcpkg的步驟如下&#xff1a; 安裝必要的依賴&#xff1a; 首先&#xff0c;你可能需要安裝cmake和ninja-build。你可以使用apt包管理器來安裝它們&#xff1a; bash復制代碼sudo apt install cmake ninja-build下載vcpkg源碼&#xff1a;…

后端開發面經系列 -- 阿里C++二面面經

阿里C二面面經 公眾號&#xff1a;阿Q技術站 來源&#xff1a;https://www.nowcoder.com/feed/main/detail/fc4a48403b534aafa6a6bce14b542c4e?sourceSSRsearch 1、智能指針&#xff1f; std::shared_ptr&#xff1a; 原理&#xff1a;std::shared_ptr是基于引用計數的智能指…

Stable Diffusion入門使用技巧及個人實例分享--大模型及lora篇

大家好&#xff0c;近期使用Stable Diffusion比較多&#xff0c;積累整理了一些內容&#xff0c;得空分享給大家。如果你近期正好在關注AI繪畫領域&#xff0c;可以看看哦。 本文比較適合已經解決了安裝問題&#xff0c;&#xff08;沒有安裝的在文末領取&#xff09; 在尋找合…

【RAG】Linux系統下ppt轉pptx,讀取解析pptx文本數據

前情提要 檢索增強生成&#xff08;RAG&#xff09;技術&#xff0c;作為 AI 領域的尖端技術&#xff0c;能夠提供可靠且最新的外部知識&#xff0c;極大地便利了各種任務。在 AI 內容生成的浪潮中&#xff0c;RAG 通過其強大的檢索能力為生成式 AI 提供了額外的知識&#xff…

vue3 動態加載頁面

首先&#xff0c;通過下面代碼告訴編譯器要編譯哪些頁面 static modules import.meta.glob(./views/**/*.vue);然后動態加載函數這樣寫&#xff1a; static asyncLoadView (path: string) > {return defineAsyncComponent({loader: <any>Global.modules[./views/${…

Redis的跳表:高效實現有序集合

在 Redis 中&#xff0c;跳表&#xff08;Skip List&#xff09;是一種常用的數據結構&#xff0c;用于實現有序集合&#xff08;Sorted Set&#xff09;。跳表是一種基于鏈表的數據結構&#xff0c;具有快速的查找、插入和刪除操作&#xff0c;適用于有序集合的實現。 本文將…

分布式搜索——ElasticSeach簡介

一般都用數據庫存儲數據&#xff0c;然后對數據庫進行查詢獲取數據&#xff0c;但是當數據量很大時&#xff0c;查詢效率就會很慢&#xff08;具體下面會講到&#xff09;&#xff0c;所以這種情況下就會使用到ElasticSeach ElasticSeach的基本介紹 ElasticSeach是一 款非常強…