vue3中$refs使用

在Vue 3中使用ref获取DOM元素的方法如下：

1. 在Vue组件的setup()函数中，通过ref方法创建一个引用变量，用于存储DOM元素的引用。

例如，可以在setup()函数中创建一个名为myRef的引用变量，用于存储一个button元素的引用：

import { ref } from 'vue'

export default {
  setup() {
    const myRef = ref(null)
    return {
        myRef
    }
  }
}

2. 在需要获取DOM元素的地方，通过定义一个变量并将其赋值为myRef的值，来获取DOM元素的引用。

例如，在模板中可以通过v-bind指令将myRef的值绑定到button元素的ref属性上：

<template>
  <button ref="myRef">Click me!</button>
</template>

在其他地方，例如事件处理函数中，可以通过this.$refs.myRef来访问DOM元素的引用：

methods: {
  handleClick() {
    const buttonElem = this.$refs.myRef
    // Do something with buttonElem
  }
}

注意，ref方法返回的是一个带有value属性的对象，而不是直接返回原始值。因此，在访问DOM元素引用时需要使用value属性。