記VUE3+TS獲取組件類型的方法踩坑及解決
更新時(shí)間：2023年03月06日 14:54:29 作者：z_y_z_l
這篇文章主要介紹了VUE3+TS獲取組件類型的方法踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
VUE3+TS獲取組件類型的方法踩坑
獲取組件類型的方法
const AccountRef = ref<InstanceType<typeof LoginAccount>>()
遇到的坑
typeof LoginAccount一直報(bào)紅線提示錯(cuò)誤
LoginAction: () => vo...' provides no match for the signature 'new (...args: any): any'.
問(wèn)題原因
使用的是webstorm codeing，通過(guò)webstorm自帶右鍵新建vue文件，創(chuàng)建出來(lái)的文件是不帶defineComponent的，所以導(dǎo)致上述的一直報(bào)紅線
<script lang="ts">
export default {
}
</script>
解決辦法
引用defineComponent
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({//注意這里的這個(gè)小括號(hào)不能漏
})
</script>
VUE3+TS獲取組件ref實(shí)例
使用 vue3 和 ts 時(shí)，為了獲取 組件 ref 實(shí)例，就需要在 ref 函數(shù)的泛型中指定類型。
如何獲取組件的類型呢？
vue 官方文檔中 TypeScript 支持里已經(jīng)告訴我們了一個(gè)獲取組件類型的方法，InstanceType<typeof 組件名稱>
使用方式如下：
const $userForm = ref<InstanceType<typeof userForm>>();
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
@click.native和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了@click.native和@click的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解
這篇文章主要為大家介紹了為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別淺析
最近在做自己項(xiàng)目中,做一個(gè)非常簡(jiǎn)單的新增用戶場(chǎng)景,但是使用原生axios發(fā)送post請(qǐng)求的時(shí)候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue中關(guān)于computed計(jì)算屬性的妙用
這篇文章主要介紹了Vue中關(guān)于computed計(jì)算屬性的妙用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
element?UI中el-dialog實(shí)現(xiàn)拖拽功能示例代碼
我們?cè)陂_(kāi)發(fā)中常會(huì)遇見(jiàn)拖拽的功能,下面這篇文章主要給大家介紹了關(guān)于element?UI中el-dialog實(shí)現(xiàn)拖拽功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue不用window的方式如何刷新當(dāng)前頁(yè)面
這篇文章主要介紹了vue不用window的方式如何刷新當(dāng)前頁(yè)面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
本篇文章主要介紹了基于vue的換膚功能的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
vue 動(dòng)態(tài)給每個(gè)頁(yè)面添加title、關(guān)鍵詞和描述的方法
這篇文章主要介紹了vue 動(dòng)態(tài)給每個(gè)頁(yè)面添加title、關(guān)鍵詞和描述的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化詳解
最近正在使用Pinia進(jìn)行狀態(tài)管理,我希望在重新刷新頁(yè)面時(shí)保持狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Pinia簡(jiǎn)單使用以及數(shù)據(jù)持久化的相關(guān)資料,需要的朋友可以參考下2022-05-05