关于vue.js:Vue3如何通过ref获取真实DOM元素

52次阅读

共计 407 个字符,预计需要花费 2 分钟才能阅读完成。

在 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 操作了,比方更改 buttoninnerHTML

正文完
 0