టెంప్లేట్ రెఫ్లు Vue యొక్క డిక్లరేటివ్ మోడల్ కవర్ చేయని ఇంపరేటివ్ చేయాల్సి ఉన్నప్పుడు - ఇన్పుట్కు ఫోకస్ చేయడం, ఎలిమెంట్ కొలవడం, లేదా చైల్డ్ మెథడ్ని కాల్ చేయడం వంటి, నిజమైన DOM ఎలిమెంట్కు (లేదా చైల్డ్ కంపోనెంట్ ఇన్స్టెన్స్కు) నేరుగా రిఫరెన్స్ ఇస్తాయి.
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>
ప్యాటర్న్: డిక్లేర్ చేయండి, ఎలిమెంట్పై ద్వారా దానిని జattach చేయండి, మరియు మౌంట్ తర్వాత నిజమైన DOM నోడ్. ఇది మౌంట్ కు ముందు ఉంటుంది, కాబట్టి దీనిని (లేదా తరువాత) లో యాక్సెస్ చేయండి, setup సమయంలో కాదు.