Kako ref-i predložaka daju pristup DOM elementima ili podređenim komponentama?

Ref-i predložaka vam omogućuju dobivanje izravne reference na stvarni DOM element (ili instancu podređene komponente) kada trebate učiniti nešto imperativno što deklarativni model Vue-a ne pokriva — poput postavljanja fokusa na unos, mjerenja elementa ili pozivanja metode podređene komponente.

Pristup DOM elementu

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

const inputEl = ref(null);   // 1. create a ref (initially null)

onMounted(() => {
  inputEl.value.focus();      // 3. after mount, .value is the DOM element
});
</script>

<template>
  <input ref="inputEl" />     <!-- 2. ref attribute name matches the variable -->
</template>

Uzorak: deklariras , priključi je na element pomoću , a nakon montiranja, je stvarni DOM čvor. To je prije montiranja, pa joj pristupi u (ili kasnije), ne tijekom setup-a.