在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