Hvordan giver template refs dig adgang til DOM-elementer eller underordnede komponenter?

Template refs lader dig få en direkte reference til et rigtigt DOM-element (eller en instans af en underordnet komponent), når du har brug for at gøre noget imperative, som Vues deklarative model ikke dækker — som at fokusere på et input, måle et element eller kalde en underordnet metode.

Adgang til et 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 , vedhæft det via på elementet, og efter montering er den faktiske DOM-knude. Det er før montering, så få adgang til det i (eller senere), ikke under setup.