Jak vám šablonové reference umožňují přístup k DOM prvkům nebo podřízeným komponentám?

Šablonové reference vám umožňují získat přímý odkaz na skutečný DOM prvek (nebo instanci podřízené komponenty), když potřebujete udělat něco imperativního, co deklarativní model Vue nepokrývá — jako zaměření na vstup, měření prvku nebo volání metody dítěte.

Přístup k prvku DOM

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

Vzor: deklarujte , připojte jej přes na prvek a po připojení je skutečný uzel DOM. Před připojením je , takže k němu přistupujte v (nebo později), ne během setup.