টেমপ্লেট রেফস কীভাবে DOM উপাদান বা চাইল্ড কম্পোনেন্টগুলিতে প্রবেশাধিকার দেয়?

টেমপ্লেট রেফস আপনাকে একটি প্রকৃত DOM উপাদান (অথবা একটি চাইল্ড কম্পোনেন্ট ইনস্ট্যান্স) এর প্রত্যক্ষ রেফারেন্স পেতে দেয় যখন আপনার কিছু অপরিহার্য কিছু করার প্রয়োজন যা Vue-এর ডিক্লেরেটিভ মডেল কভার করে না — যেমন একটি input ফোকাস করা, একটি উপাদান পরিমাপ করা, বা একটি চাইল্ড-এর মেথড কল করা।

একটি 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 নোড। এটি মাউন্ট করার আগে ।