Vue3如何通过ref获取真实DOM元素

简介: Vue3如何通过ref获取真实DOM元素

在Vue2中我们可以在<template>中的元素标签使用ref属性(类似于原生HTML标签的id属性)在<script>标签通过this.$refs拿到真实DOM标签的元素。

image.png

image.png

获取具体到<button>体,可以通过this.$refs.btn来获取。

但是在Vue3中,我们在setup函数中,无法获取this,它的指向是undefined。那我们如何获取呢?

这里我们需要用到Vue3提出的一个新APIgetCurrentInstance,英语翻译过来就是得到当前实例,这个函数调用的返回值就是当前组件实例对象,相当于vue2中组件的this

首先引入这个API,

image.png

然后给button打上ref属性。注意! 这里的ref不等同于返回响应式属性的那个refAPI。

image.png

随后我们调用函数,并且打印一下变量instance

image.png

如下图所示,看到这个refs对象了吗?

image.png

然后我们就可进行dom操作了,比如更改buttoninnerHTML

image.png

image.png

相关文章
|
11天前
|
JavaScript
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
Vue中ref创建_基本类型的响应式数据,在Vue2的年代,数据配在data里,Vue3的区别是不把响应数据写在data里,那个数据是响应式的用ref包一下,let name = ref(“张三“)
|
13天前
|
JavaScript
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
11 1
|
15天前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
10 2
|
9天前
手写 vue3 的 ref,reactive 和 watchEffect
手写 vue3 的 ref,reactive 和 watchEffect
12 0
|
9天前
|
存储 JavaScript 前端开发
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)
21 0
|
11天前
|
JavaScript 前端开发
文本,粘贴事件如何实现,先实现一个小目标,如何存入图片,从本地生成源码,先转成base64,ctrl + v这张图片就显示出来了怎样实现的,Vue可以有方法可以获取粘贴的所有元素,转base64字符串
文本,粘贴事件如何实现,先实现一个小目标,如何存入图片,从本地生成源码,先转成base64,ctrl + v这张图片就显示出来了怎样实现的,Vue可以有方法可以获取粘贴的所有元素,转base64字符串
|
11天前
|
JavaScript
Vue3的使用,ref定义基本类型的响应式数据,如何创建对象类型的响应式数据,let car = {brand: ‘奔驰‘,price: 100},{{car.brand}},reactive的使用
Vue3的使用,ref定义基本类型的响应式数据,如何创建对象类型的响应式数据,let car = {brand: ‘奔驰‘,price: 100},{{car.brand}},reactive的使用
|
11天前
|
JavaScript
vue v-for循环渲染动态ref表单校验的实现技巧
vue v-for循环渲染动态ref表单校验的实现技巧
34 0
|
13天前
|
JavaScript
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
14 0
|
2月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。