vue3+ts中定义ref变量,设置变量类型方式

更新时间：2024年03月15日 09:10:33 作者：chendf_

这篇文章主要介绍了vue3+ts中定义ref变量,设置变量类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3+ts定义ref变量,设置变量类型

给定义的 ref 的值设置类型

<template>
	<el-input ref="input"></el-input>
</template>

//....
import {Ref, ref} from 'vue'
const input: Ref<HTMLElement> = ref(null)

这样写之后会导致编译报错（vuetur报错）

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）中定义一个类型声明

// 定义声明
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({});

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

可能是全网vue v-model最详细讲解教程
Vue官网教程上关于v-model的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下,下面这篇文章主要给大家介绍了关于vue v-model最详细讲解的相关资料,需要的朋友可以参考下
2022-11-11
Vue自定义指令实现点击右键弹出菜单示例详解
这篇文章主要为大家介绍了Vue自定义指令实现点击右键弹出菜单示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
Vue3子组件实现v-model用法的示例代码
在Vue 3中,实现自定义的input组件并支持v-model绑定,涉及到对modelValue这个默认prop的处理和对应的update:modelValue事件的触发,本文给大家介绍了Vue3子组件实现v-model用法的示例,需要的朋友可以参考下
2024-04-04
vue el-upload手动上传实现过程
这篇文章主要介绍了vue el-upload手动上传实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue移动端监听滚动条高度的实现方法
今天小编就为大家分享一篇vue移动端监听滚动条高度的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue实现跑马灯简单效果
这篇文章主要为大家详细介绍了Vues实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue 取出v-for循环中的index值实例
今天小编就为大家分享一篇vue 取出v-for循环中的index值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue2.0 中使用transition实现动画效果使用心得
这篇文章主要介绍了vue2.0 中使用transition实现动画效果使用心得，本文通过案例知识给大家介绍的非常详细，需要的朋友参考下吧
2018-08-08
vue多页面开发和打包正确处理方法
这篇文章主要介绍了vue多页面开发和打包的正确处理方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2018-04-04
Vue生态系统工具库Vueuse的使用示例详解
Vueuse 是一个功能强大的 Vue.js 生态系统工具库,它提供了一系列的可重用的 Vue 组件和函数,本文将介绍 Vueuse 的主要特点和用法,以及它在 Vue.js 开发中的作用和优势,感兴趣的可以了解下
2024-02-02