Les refs de template vous permettent d'obtenir une référence directe à un vrai élément DOM (ou une instance de composant enfant) quand vous avez besoin de faire quelque chose d'impératif que le modèle déclaratif de Vue ne couvre pas — comme donner le focus à une entrée, mesurer un élément, ou appeler une méthode d'un enfant.
Accéder à un élément 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>
Le pattern : déclarez une , attachez-la via sur l'élément, et après le montage, est le vrai nœud DOM. C'est avant le montage, donc accédez-y dans (ou plus tard), pas pendant la setup.