在 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