Bagaimanakah rujukan templat memberikan akses kepada elemen DOM atau komponen anak?

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.