Rujukan templat memungkinkan Anda mendapatkan rujukan langsung kepada elemen DOM nyata (atau instans komponen anak) ketika Anda perlu melakukan sesuatu yang imperatif yang model deklaratif Vue tidak mencakup — seperti fokus input, pengukuran elemen, atau memanggil metode anak.
Mengakses elemen 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>
Pola: deklarasikan , pasangkan melalui pada elemen, dan setelah mount, adalah simpul DOM sebenarnya. Ini sebelum mounting, jadi akses dalam (atau nanti), bukan selama setup.
