Hur ger template refs åtkomst till DOM-element eller underkomponenter?

Template refs ger dig en direkt referens till ett verkligt DOM-element (eller en underkomponentinstans) när du behöver göra något imperativt som Vues deklarativa modell inte täcker — som att fokusera en inmatning, mäta ett element eller anropa en underkomponents metod.

Åtkomst till ett 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önstret: deklarera , bifoga det via på elementet, och efter montering är den verkliga DOM-noden. Det är före montering, så få åtkomst till det i (eller senare), inte under setup.