I template ref ti permettono di ottenere un riferimento diretto a un elemento DOM reale (o a un'istanza di componente figlio) quando devi fare qualcosa di imperativo che il modello dichiarativo di Vue non copre — come focalizzare un input, misurare un elemento, o chiamare un metodo di un figlio.
Accesso a un elemento DOM
vue
<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>
Il pattern: dichiara un , allegalo tramite sull'elemento, e dopo il mount, è il nodo DOM effettivo. È prima del mounting, quindi accedilo in (o dopo), non durante setup.