Template refs ले कसरी DOM elements वा child components को access दिन्छ?

Template refs ले तपाईंलाई वास्तविक DOM element (वा child component instance) को सीधा reference पाउन दिन्छ जब तपाईंले कुनै imperative काम गर्न चाहनुहुन्छ जुन Vue को declarative model ले कभर गर्दैन — जस्तै input फोकस गर्ने, element मापन गर्ने, वा child को method कल गर्ने।

DOM element को access

<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>

Pattern: declare गरौं, यसलाई element मा माध्यमबाट attach गरौं, र mount पछी वास्तविक DOM node हो। यो mount हुनु अघि हुन्छ, त्यसैले यसलाई setup को समयमा नभई (वा पछी) मा access गरौं।