टेम्पलेट refs DOM घटकांवर किंवा संतान घटकांवर प्रवेशाधिकार कसे देतात?

टेम्पलेट refs आपल्याला वास्तविक DOM घटक (किंवा संतान घटक उदाहरण) साठी प्रत्यक्ष संदर्भ मिळू देतात जेव्हा आपल्याला Vue च्या घोषणात्मक मॉडेलने कव्हर न केलेली काही अनिवार्य गोष्ट करायची असते — जसे इनपुट फोकस करणे, घटक मोजणे, किंवा संतानाची पद्धती कॉल करणे.

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>

नमुना: घोषित करा, द्वारे घटकावर जोडा, आणि mount नंतर, वास्तविक DOM नोड आहे. ते mount करण्याच्या आधी आहे, म्हणून मध्ये (किंवा नंतर) प्रवेश करा, setup च्या दरम्यान नाही.