டெம்ப்ளேட் ரெஃபுகள் உண்மையான DOM உறுப்பு (அல்லது சைல்ட் கம்போனென்ட் இன்ஸ்ட்டான்ஸ்) க்கு நேரடி குறிப்பு வழங்குகின்றன, Vue இன் டிக்ளரேடிவ் மாடல் அல்லாமல் செய்ய வேண்டிய ஏதாவது - உள்ளீட்டைக் கவனத்தில் கொள்ளுதல், உறுப்பைக் கணக்கிடுதல், அல்லது சைல்ட் மெத்தாடை அழைப்பது போல.
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>
பேட்டர்ன்: அறிவிக்கவும், உறுப்பில் மூலம் இணைக்கவும், மற்றும் மவுன্ட் அgitlab னுக்குப் பிறகு உண்மையான DOM நோடு. இது மவுன்ட் அளவிற்கு முன் ஆகும், எனவே (அல்லது பின்னர்) இல் அணுகவும், setup போது அல்ல.