Template Refs & defineExpose

Kapan butuh akses langsung ke DOM?

Sebagian besar waktu, Vue mengurus DOM untukmu. Tetapi ada kasus yang butuh akses langsung: memfokuskan input, mengukur ukuran elemen, memutar video, atau memakai pustaka pihak ketiga yang butuh elemen nyata. Untuk itu ada template ref.

Cara memakai

<script setup>
import { ref, onMounted } from 'vue'

const kolom = ref(null)          // nama variabel = nilai atribut ref di template

onMounted(() => {
  kolom.value.focus()            // elemen DOM asli
})
</script>

<template>
  <input ref="kolom" placeholder="Auto fokus">
</template>

• Beri atribut ref="nama" pada elemen.
• Buat const nama = ref(null) dengan nama yang sama.
• Elemen baru tersedia setelah mount; sebelumnya nilainya null. Karena itu aksesnya di onMounted atau di event handler.

Ref di dalam v-for

<li v-for="item in daftar" :key="item.id" ref="barisRef">{{ item.nama }}</li>

const barisRef = ref([])      // array elemen (urutan tidak dijamin sama dengan sumber)

Ref pada komponen anak

Ref pada komponen memberi akses ke instance-nya. Dengan <script setup>, komponen anak bersifat tertutup secara bawaan: induk tidak bisa mengakses apa pun kecuali yang dibuka dengan defineExpose.

<!-- Hitung.vue -->
<script setup>
import { ref } from 'vue'
const n = ref(0)
function reset() { n.value = 0 }
defineExpose({ reset })           // hanya reset yang boleh diakses induk
</script>

<!-- Induk -->
<Hitung ref="hitung" />
<button @click="hitung.reset()">Reset</button>

const hitung = ref(null)

useTemplateRef (Vue 3.5)

Vue 3.5 menambah API useTemplateRef('nama') yang tidak bergantung pada kesamaan nama variabel. Keduanya valid; kursus ini memakai gaya ref(null) yang tersedia di semua versi 3.x.

Kesalahan umum

• Mengakses kolom.value di tubuh setup (masih null).
• Nama variabel tidak sama dengan atribut ref → tetap null.
• Memanggil method anak yang tidak diekspos dengan defineExpose → error "is not a function".