Πώς σας δίνουν οι template refs πρόσβαση σε στοιχεία DOM ή θυγατρικά στοιχεία;

Οι template refs σας επιτρέπουν να λάβετε μια άμεση αναφορά σε ένα πραγματικό στοιχείο DOM (ή μια παρουσία ενός θυγατρικού στοιχείου) όταν χρειάζεστε να κάνετε κάτι επιτακτικό που το δηλωτικό μοντέλο του Vue δεν καλύπτει — όπως εστίαση σε ένα input, μέτρηση ενός στοιχείου ή κλήση μιας μεθόδου ενός θυγατρικού.

Πρόσβαση σε ένα στοιχείο 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>

Το μοτίβο: δηλώστε , συνδέστε το μέσω στο στοιχείο, και μετά την προσάρτηση, είναι ο πραγματικός κόμβος DOM. Είναι πριν από την προσάρτηση, επομένως αποκτήστε πρόσβαση σε αυτό στο (ή αργότερα), όχι κατά τη διάρκεια της ρύθμισης.