likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 298

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

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

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

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


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

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

首先引入这个API,

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

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

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

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

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

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

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

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

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

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