Як отримати доступ до DOM через ref?

VueJunior~1 хв читання

Щоб отримати доступ до DOM через ref у Vue, використовується template ref - це ref, який прив'язується до реального DOM-елемента. Доступ до DOM з'являється тільки після монтування компонента.

1. Використання ref у Composition API

Крок 1: створити ref-змінну

const inputEl = ref(null)

Крок 2: прив'язати її в шаблоні

html

<input ref="inputEl" />

Крок 3: отримати доступ в onMounted

onMounted(() => {
  inputEl.value.focus()       // inputEl.value - це реальний DOM елемент
})

Повний приклад

vue

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

const inputEl = ref(null)

onMounted(() => {
  console.log(inputEl.value)  // <input ...>
  inputEl.value.focus()
})
</script>

<template>
  <input ref="inputEl" />
</template>

Що можна робити з DOM-елементом?

inputEl.value.focus()
inputEl.value.blur()
inputEl.value.style.color = 'red'
inputEl.value.classList.add('active')
inputEl.value.getBoundingClientRect()

Будь-які методи звичайних DOM-елементів доступні.

Важливі правила

1. ref доступний тільки після onMounted

До монтування:

console.log(inputEl.value) // null

2. ref повертає сам DOM-елемент

А не реактивний об'єкт - це прямий reference на елемент.

3. Якщо елемент прихований через v-if

ref буде null, поки елемент не з'явиться.

4. При v-for ref → масив ref-ів

Наприклад:

html

<div v-for="item in items" :ref="elRefs">...</div>

Приклад з кнопкою "Скрол до елемента"

vue

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

const box = ref(null)

function scrollToBox() {
  box.value.scrollIntoView({ behavior: 'smooth' })
}
</script>

<template>
  <button @click="scrollToBox">Scroll</button>
  <div ref="box" style="margin-top:1000px">Target</div>
</template>

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.