टेम्पलेट refs आपको एक वास्तविक DOM तत्व (या एक चाइल्ड कंपोनेंट इंस्टेंस) का सीधा संदर्भ प्राप्त करने देते हैं जब आपको कुछ अनिवार्य करने की आवश्यकता हो जो Vue के घोषणात्मक मॉडल द्वारा कवर नहीं किया गया हो — जैसे इनपुट को फोकस करना, तत्व को मापना, या चाइल्ड की विधि को कॉल करना।
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>
पैटर्न: एक घोषित करें, इसे तत्व पर के माध्यम से संलग्न करें, और माउंट के बाद, वास्तविक DOM नोड है। यह माउंट से पहले है, इसलिए इसे (या बाद में) में एक्सेस करें, सेटअप के दौरान नहीं।