ٹیمپلیٹ refs کس طرح DOM عناصر یا بچے کے اجزاء تک رسائی فراہم کرتے ہیں؟

ٹیمپلیٹ refs آپ کو کسی حقیقی DOM عنصر (یا بچے کے جزء کی instance) کا براہ راست حوالہ حاصل کرنے دیتے ہیں جب آپ کو کوئی ضروری کام کرنا ہو جو Vue کا اعلانی ماڈل احاطہ نہیں کرتا — جیسے input کو focus کرنا، عنصر کو ماپنا، یا بچے کے طریقے کو کال کرنا۔

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>

نمونہ: کا اعلان کریں، اسے عنصر پر کے ذریعے attach کریں، اور mount کے بعد، حقیقی DOM نوڈ ہے۔ یہ mount سے پہلے ہے، لہذا اسے میں (یا بعد میں) رسائی کریں، setup کے دوران نہیں۔