Bagaimana ref template memberikan akses ke elemen DOM atau komponen anak?

Ref template memungkinkan Anda mendapatkan referensi langsung ke elemen DOM asli (atau instans komponen anak) ketika Anda perlu melakukan sesuatu yang imperatif yang tidak dicakup oleh model deklaratif Vue — seperti memberi fokus pada input, mengukur 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 node DOM sebenarnya. Ini sebelum mount, jadi akses dalam (atau nanti), bukan selama setup.