Wie geben template refs dir Zugriff auf DOM-Elemente oder untergeordnete Komponenten?

Template refs ermöglichen dir den Zugriff auf eine direkte Referenz zu einem echten DOM-Element (oder einer Instanz einer untergeordneten Komponente), wenn du etwas Imperatives tun musst, das Vues deklaratives Modell nicht abdeckt — wie das Fokussieren auf eine Eingabe, das Messen eines Elements oder das Aufrufen einer Methode eines untergeordneten Elements.

Zugriff auf ein 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>