Cum oferă referințele de șablon acces la elementele DOM sau componentele copil?

Referințele de șablon vă permit să obțineți o referință directă la un element DOM real (sau o instanță de componentă copil) atunci când trebuie să faceți ceva imperativ pe care modelul declarativ al Vue nu îl acoperă — cum ar fi focalizarea unei intrări, măsurarea unui element sau apelarea unei metode a unui copil.

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>

Modelul: declarați un , atașați-l prin pe element și după montare, este nodul DOM real. Este înainte de montare, deci accesați-l în (sau mai târziu), nu în timpul setup.