在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
    }
  }
}
  1. 在需要获取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属性。

Logo

前往低代码交流专区

更多推荐