ટેમ્પલેટ 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>

પેટર્ન: ઘોષિત કરો, તે તત્વ પર દ્વારા જોડો, અને માઉન્ટ કર્યા પછી, વાસ્તવિક DOM નોડ છે. તે માઉન્ટ કરતા પહેલે છે, તેથી તેને (અથવા બાદમાં) માં ઍક્સેસ કરો, સેટઅપ દરમિયાન નહીં.