在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不等同于返回响应式属性的那个refAPI。
随后咱们调用函数,并且打印一下变量instance
如下图所示,看到这个refs对象了吗?
而后咱们就可进行dom操作了,比方更改button的innerHTML