vue3.x模板引用(通过ref获取dom节点)

zx&it

已于 2022-05-27 15:05:52 修改

阅读量1k

点赞数

分类专栏： vue技巧文章标签： vue.js javascript vue-cli3 前端前端框架

于 2022-01-04 17:37:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40639028/article/details/122307784

版权

vue技巧专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue2.x和Vue3.x中获取DOM节点的不同方式。在Vue2.x中，可以使用`this.$refs.dom`获取div元素的DOM节点，而在Vue3.x中，需通过`ref`和`onMounted`来实现。对于动态生成的ref，文章展示了如何在v-for中结合setup函数和onBeforeUpdate钩子来管理并获取多个动态ref。

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

在vue2.x中：

this.$refs.dom即可获取到div的dom节点

但在vue3.x中不能通过this.$refs获取。正确获取的方式如下：

<div ref="dom"></div>

setup(){

        const dom = ref(null);

        onMounted(()=>{

                console.log(dom.value); //vue3获取ref的dom节点

        })

        return {

                dom

        }

}

当需要动态渲染dom节点，通过v-for动态生成ref。代码如下：

<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // 确保在每次更新之前重置ref
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }
  }
</script>