在Vue2中我们可以在<template>
中的元素标签使用ref
属性(类似于原生HTML标签的id
属性)在<script>
标签通过this.$refs
拿到真实DOM标签的元素。
获取具体到<button>
体,可以通过this.$refs.btn
来获取。
但是在Vue3中,我们在setup
函数中,无法获取this
,它的指向是undefined
。那我们如何获取呢?
这里我们需要用到Vue3提出的一个新APIgetCurrentInstance
,英语翻译过来就是得到当前实例,这个函数调用的返回值就是当前组件实例对象,相当于vue2中组件的this
。
首先引入这个API,
然后给button
打上ref
属性。注意! 这里的ref
不等同于返回响应式属性的那个ref
API。
随后我们调用函数,并且打印一下变量instance
如下图所示,看到这个refs
对象了吗?
然后我们就可进行dom
操作了,比如更改button
的innerHTML