Halo teman-teman semuanya, setelah sebelumnya kita belajar tentang class dan style binding, kali ini kita akan membahas salah satu konsep penting dalam pengembangan web modern, yaitu Component dan bagaimana membuat kode yang bisa digunakan ulang (reusable) di Alpine.js.
Walaupun Alpine.js adalah library yang ringan dan minimalis, tapi kita tetap bisa membuat komponen yang terpisah dan rapi agar struktur kode lebih bersih dan mudah dikelola.
Apa Itu Komponen di Alpine.js?
Di Alpine.js, komponen pada dasarnya adalah blok HTML yang memiliki x-data sendiri. Setiap x-data akan menciptakan ruang lingkup (scope) data dan interaksi sendiri, mirip seperti komponen pada framework lain seperti Vue atau React, tapi dengan cara yang lebih sederhana.
Contoh Komponen Sederhana
<div x-data="{ count: 0 }">
<button @click="count++">Tambah</button>
<span x-text="count"></span>
</div>
Kalau kita ingin membuat dua counter yang berbeda, kita cukup salin blok tersebut:
<div x-data="{ count: 0 }">
<button @click="count++">Tambah</button>
<span x-text="count"></span>
</div>
<div x-data="{ count: 0 }">
<button @click="count++">Tambah</button>
<span x-text="count"></span>
</div>
Masing-masing komponen punya count sendiri. Inilah kekuatan komponen di Alpine.js.
Membuat Template yang Bisa Digunakan Ulang
Agar tidak menulis kode yang sama berulang-ulang, kita bisa membuat fungsi JavaScript untuk menghasilkan objek x-data, lalu digunakan di banyak tempat.
Contoh:
<script>
function counterComponent() {
return {
count: 0,
tambah() {
this.count++;
}
};
}
</script>
<div x-data="counterComponent()">
<button @click="tambah">Tambah</button>
<span x-text="count"></span>
</div>
Dengan cara ini, kita bisa membuat banyak komponen counter tanpa harus menulis ulang logika datanya.
Tips: Gunakan Partial HTML atau Komponen di Blade (Laravel)
Kalau kita pakai Alpine.js di Laravel atau framework lain, kita bisa simpan komponen di partial file atau komponen Blade. Misalnya:
{{-- resources/views/components/counter.blade.php --}}
<div x-data="counterComponent()">
<button @click="tambah">Tambah</button>
<span x-text="count"></span>
</div>
Lalu dipanggil seperti ini:
<x-counter />
Kesimpulan
Di artikel ini, kita sudah belajar bagaimana cara membuat komponen di Alpine.js dan bagaimana membuat fungsi reusable agar kode bisa digunakan ulang dengan lebih efisien.
Di artikel selanjutnya, kita akan belajar tentang Lifecycle Hooks di Alpine.js, yaitu bagaimana kita bisa menjalankan fungsi tertentu saat komponen dibuat, diubah, atau dihapus.
Terima Kasih