Hoe geven template refs toegang tot DOM-elementen of kind-componenten?

Template refs geven u direct toegang tot een werkelijk DOM-element (of een instantie van een kindcomponent) wanneer u iets imperatief moet doen dat Vue's declaratieve model niet dekt — zoals het focussen van een input, het meten van een element of het aanroepen van een methode van een kind.

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>

Het patroon: declareer een , bind het via op het element, en na mount is het werkelijke DOM-knooppunt. Het is vóór mounting, dus open het in (of later), niet tijdens setup.