記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'.
問題原因
使用的是webstorm codeing，通過webstorm自帶右鍵新建vue文件，創(chuàng)建出來的文件是不帶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)文章
這篇文章主要介紹了Vue中建立全局引用或者全局命令的方法2017-08-08
這篇文章主要介紹了Vue.prototype詳解及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vue中使用Axios調(diào)用接口時(shí)出現(xiàn)的ie數(shù)據(jù)處理問題
今天小編就為大家分享一篇解決vue中使用Axios調(diào)用接口時(shí)出現(xiàn)的ie數(shù)據(jù)處理問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
VUE項(xiàng)目去除input 框值所有空格的操作方法
這篇文章主要介紹了VUE項(xiàng)目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue如何解決空格和空行報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue2項(xiàng)目升級(jí)到Vue3的詳細(xì)教程
看到好多開源項(xiàng)目都升級(jí)了vue3,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目升級(jí)到Vue3的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限管理詳解,權(quán)限是對(duì)特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源,而前端權(quán)限歸根結(jié)底是請(qǐng)求的發(fā)起權(quán)，請(qǐng)求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08
vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果(支持fixed)
本文主要介紹了vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解mpvue開發(fā)微信小程序基礎(chǔ)知識(shí)
這篇文章主要介紹了詳解mpvue開發(fā)微信小程序基礎(chǔ)知識(shí),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue.js學(xué)習(xí)筆記之v-bind和v-on解析
這篇文章主要介紹了vue.js學(xué)習(xí)筆記之v-bind和v-on解析，v-bind 指令用于響應(yīng)地更新 HTML 特征，v-on 指令用于監(jiān)聽DOM事件，文中還給大家提到了v-bind,v-on的縮寫，感興趣的朋友參考下吧2018-05-05