​​​​​​在这里插入图片描述
在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);
})
Logo

GitCode 天启AI是一款由 GitCode 团队打造的智能助手,基于先进的LLM(大语言模型)与多智能体 Agent 技术构建,致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话,还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力,真正做到“一句话,让 Al帮你完成复杂任务”。

更多推荐