Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Lifecycle Hooks, bagaimana menjalankan kode pada fase tertentu dalam siklus hidup komponen.
Pada artikel kali ini, kita akan membahas tentang Template Refs, yaitu cara mengakses elemen DOM atau komponen anak secara langsung di Vue.
Apa Itu Template Refs?
Secara default, Vue bekerja dengan data binding (state → UI). Namun, kadang kita membutuhkan akses langsung ke elemen DOM, misalnya untuk:
- Fokus ke input setelah halaman dimuat.
- Mengukur lebar/tinggi elemen.
- Menggunakan library eksternal yang butuh akses DOM.
Di Vue, kita bisa menggunakan ref khusus yang disebut template refs.
Membuat Template Ref
Untuk membuat template ref:
- Definisikan
ref(null) di <script setup>.
- Tambahkan atribut
ref="namaRef" di elemen template.
<script setup>
import { ref, onMounted } from "vue"
const inputEl = ref(null)
onMounted(() => {
inputEl.value.focus()
})
</script>
<template>
<input ref="inputEl" placeholder="Auto focus saat mount" />
</template>
Saat komponen tampil, Vue akan mengisi inputEl.value dengan elemen DOM <input>.
Akses Properti DOM
Kita bisa menggunakan properti DOM langsung.
<script setup>
import { ref, onMounted } from "vue"
const box = ref(null)
onMounted(() => {
console.log("Lebar box:", box.value.offsetWidth, "px")
})
</script>
<template>
<div ref="box" style="width: 200px; height: 100px; background: lightblue;">
Kotak
</div>
</template>
Template Refs pada Komponen Anak
Template refs juga bisa digunakan untuk mengakses komponen anak dan memanggil method di dalamnya.
-
Child.vue
<script setup>
import { ref } from "vue"
function sayHello() {
alert("Halo dari Child Component!")
}
defineExpose({ sayHello })
</script>
<template>
<p>Ini komponen anak</p>
</template>
-
Parent.vue
<script setup>
import { ref, onMounted } from "vue"
import Child from "./Child.vue"
const childRef = ref(null)
onMounted(() => {
childRef.value.sayHello()
})
</script>
<template>
<Child ref="childRef" />
</template>
Dengan defineExpose, kita bisa membuka method dari komponen anak agar bisa diakses oleh parent.
Kapan Menggunakan Template Refs?
Gunakan template refs jika:
- Kita butuh akses DOM langsung (misalnya fokus input).
- Kita butuh integrasi dengan library eksternal berbasis DOM.
- Kita ingin parent memanggil method tertentu dari child.
Namun, jangan terlalu sering gunakan refs. Sebaiknya tetap gunakan data binding (v-model, props, emit) untuk menjaga kode lebih reaktif dan terstruktur.
Kesimpulan
Pada artikel ini, kita sudah belajar tentang Template Refs di Vue, mulai dari akses elemen DOM, membaca properti, hingga memanggil method komponen anak.
Dengan template refs, kita punya kontrol langsung terhadap elemen/komponen ketika binding data biasa tidak cukup.
Di artikel berikutnya, kita akan membahas tentang Computed Properties & Watchers, dua fitur penting untuk mengelola data turunan dan memantau perubahan state.
Terima kasih