Vue3在setup中获取元素引用（ref）

在非setup钩子中, 我们可以通过this.$refs来获取指定元素，但是setup中没有"this"，所以要用其他方式来获取元素。在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI一定要注意，ref创建的是一个响应式数据。这个在VUE3.0中非常灵活，几乎是怎么玩都行的。具体后边还会说到，这里大概说一下基本用法。1、引入ref2、使用注意点。

不怕麻烦的鹿丸

11581人浏览 · 2022-09-27 11:50:58

不怕麻烦的鹿丸 · 2022-09-27 11:50:58 发布

在非setup钩子中, 我们可以通过this.$refs来获取指定元素，但是setup中没有"this"，所以要用其他方式来获取元素。

一、关于ref关键字

在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

一定要注意，ref创建的是一个响应式数据。这个在VUE3.0中非常灵活，几乎是怎么玩都行的。具体后边还会说到，这里大概说一下基本用法。

1、引入ref

import { ref} from "vue";

2、使用注意点

在 VUE 的模板中使用 ref 的值不需要通过 value 获取（Vue 会通过自动给 ref 的值加上 .value）

在 js 中使用 ref 的值必须使用 .value 获取

二、在setup中引用元素

1、借助 ref() 函数

<template>
   <div ref="divRef" />
</template>

<script setup>
  import { ref } from 'vue'

  const divRef = ref(null)

  divRef.value

</script>

2、找到 this

通过 getCurrentInstance() 可以获得 vue 实例对象

<template>
   <div ref="divRef" />
</template>

<script setup>
  import { getCurrentInstance, onMount } from 'vue'

  onMount(() => {
    getCurrentInstance().ctx.$refs.divRef
  })

</script>

注意，使用 getCurrentInstance 是有一些限制的，可以参考官方说明

3、使用 :ref

当ref的值是一个函数的时候, 我们必须用":ref", 函数只有一个参数, 那就是当前元素

<template>
   <div :ref="getDivRef" />
</template>

<script setup>
  import { ref } from 'vue'

  let divRef = ref(null)

  const getDivRef = (el) => {
    divRef.value = el
  }

  
</script>