Vue3中使用ref获取dom元素的方式方法，Chatgpt的回答

柔光的暖阳◎ 2023-10-09 23:23 83阅读 0赞

![在这里插入图片描述][05064255205d4f2681fc64a042400780.png]  
在Vue3中，使用`ref`获取DOM元素（比如组件中的某个元素）的方法与Vue2有所不同。在Vue2中，我们可以给这个元素添加一个`ref`属性，并在组件中使用`this.$refs`来访问这个属性。而在Vue3中，我们需要使用Vue3提供的`ref`函数来创建一个响应式引用，然后将其作为元素的属性值传递。这样，我们才能在组件中使用`ref`函数获取到这个元素的引用。

下面是一个示例代码：

<template>
      <div ref="myDiv">Hello Vue</div>
    </template>
    
    <script>
    import { ref, onMounted } from 'vue'
    
    export default {
      setup() {
        const myDiv = ref(null)
        
        onMounted(() => {
          console.log(myDiv.value) // <div>Hello Vue</div>
        })
    
        return {
          myDiv
        }
      }
    }
    </script>

在上面的代码中，我们首先在模板中使用了`ref`，并将其设置为`myDiv`，这样这个div的引用就被赋值给了`myDiv`这个响应式引用。

接下来，在`setup()`函数中，我们使用`ref`函数创建一个名为`myDiv`的响应式引用，并将其初始化为`null`。然后，在`onMounted`中，我们通过`myDiv.value`的方式访问到了这个引用，从而获取到了这个`div`元素。

需要注意的是，由于Vue3中的组件模型已经改变，我们无法在`template`中直接访问到`this.$refs`，而是需要在`setup()`函数中使用`ref`来创建响应式引用。同时，当我们使用`ref`创建DOM元素的引用时，我们需要在模板中使用`ref`将引用绑定到元素上。

使用Setup语法糖的形式获取Dom元素：

// 使用ref获取dom元素
    const show = ref<null | HTMLElement>(null)
    onMounted(() => {
        
      console.log("show---", show.value);
    })

[05064255205d4f2681fc64a042400780.png]: https://img-blog.csdnimg.cn/05064255205d4f2681fc64a042400780.png