Hvordan gir template refs tilgang til DOM-elementer eller barnkomponenter?

Template refs lar deg få direkte referanse til et virkelig DOM-element (eller en barnkomponentinstans) når du trenger å gjøre noe imperativt som Vue's deklarative modell ikke dekker — som å fokusere en input, måle et element eller kalle en metode på et barn.

Accessing a DOM element

<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>

Mønsteret: erklær en , fest det via på elementet, og etter montering er den faktiske DOM-noden. Det er før montering, så få tilgang til det i (eller senere), ikke under oppsett.