vue3+ts中定義ref變量,設(shè)置變量類型方式
更新時(shí)間：2024年03月15日 09:10:33 作者：chendf_
這篇文章主要介紹了vue3+ts中定義ref變量,設(shè)置變量類型方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3+ts定義ref變量,設(shè)置變量類型
給定義的 ref 的值設(shè)置類型
<template>
<el-input ref="input"></el-input>
</template>
//....
import {Ref, ref} from 'vue'
const input: Ref<HTMLElement> = ref(null)
這樣寫之后會(huì)導(dǎo)致編譯報(bào)錯(cuò)（vuetur報(bào)錯(cuò)）
Type 'Ref<null>' is not assignable to type 'Ref<HTMLElement>'.
Type 'null' is not assignable to type 'HTMLElement'.Vetur(2322)
解決辦法
增加null類型
const input: Ref<HTMLElement | null> = ref(null)
在聲明文件（*.d.ts）中定義一個(gè)類型聲明
// 定義聲明 declare type Nullable<T> = T | null // 使用的地方只需要 const input: Ref<Nullable<HTMLElement>> = ref(null)
vue3 ts語法定義ref對象
分為兩步：
1.引入Ref 的 type
import type { Ref } from 'vue';2.定義Ref類型的對象
let tableData:Ref = ref({});總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 中的受控與非受控組件的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue中的stylus及stylus-loader版本問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目打包部署的實(shí)戰(zhàn)過程記錄
我們使用nginx部署Vue項(xiàng)目,實(shí)質(zhì)上就是將Vue項(xiàng)目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包部署的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)
這篇文章主要介紹了Vue2.0學(xué)習(xí)系列之項(xiàng)目上線的方法步驟(圖文)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue elementui select標(biāo)簽監(jiān)聽change事件失效問題
這篇文章主要介紹了vue elementui select標(biāo)簽監(jiān)聽change事件失效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue自定義指令學(xué)習(xí)及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue中自定義指令的學(xué)習(xí)以及如何利用Vue制作一個(gè)簡單的學(xué)生信息管理系統(tǒng)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
Vue.js是一個(gè)流行的前端框架,以其易于學(xué)習(xí)和使用而聞名,在Vue3中,借助于Composition API和新的setup語法糖,模板和渲染函數(shù)的使用變得更加靈活和強(qiáng)大,在這篇博客中,我們將深入探討Vue3是如何處理模板和渲染函數(shù)的,并通過示例代碼來展示如何有效利用這些功能2024-11-11