Vue3 中的 $refs

wj1713520

已于 2022-03-19 16:58:49 修改

阅读量5.8k

点赞数 1

分类专栏： Vue 文章标签： vue.js

于 2022-03-19 16:47:26 首次发布

本文链接：https://blog.youkuaiyun.com/wj1713520/article/details/123597373

版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在Vue3中使用compositionApi的setup语法糖时，如何通过$refs获取和操作DOM。强调必须在onMounted钩子之后才能获取DOM，并举例说明如何通过_refImpl的innerText属性来改变DOM内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意，代码使用了Vue3 compositionApi 的setup语法糖书写。

<template>
  <div ref="box"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const box = ref(null)

// 注意，这里如果不在挂载后输出到控制台，控制台是看不到dom元素的
onMounted(() => {
  console.log(box.value)
})
</script>

总结：

1.必须在onMounted挂载后才可以获取到dom

2.如果我们想要操作这个dom，可以将console.log(box.value)改为console.log(box)；

然后去控制台查看操作dom的属性和方法，展开这个RefImpl

展开 _value 属性

找到我们比较熟悉的属性 innerText，用这个属性对这个dom进行操作

<script setup>
import { ref, onMounted } from 'vue'

const box = ref(null)
onMounted(() => {
  console.log(box)

  // 在这里操控box这个dom元素的innerText属性，属性值改为123
  box.value.innerText = '123'
})
</script>

最后，回到页面上，可以发现我们已经成功操作了这个dom。

（之前这个dom里没有内容，现在有123了）