Belajar Alpine.js Dasar #12: Interaksi Antar Component

• Apa Itu Component di Alpine.js?
• Tantangan: Bagaimana Komponen Saling Berkomunikasi?
• 1. Komunikasi dengan $dispatch
• 2. Komunikasi dengan Store Global ($store)
  • Inisialisasi Store:
  • Komponen 1: Tombol Toggle
  • Komponen 2: Status Login
• 3. Mengakses Elemen via $refs
• Kesimpulan

Halo teman-teman semuanya, di seri sebelumnya, kita sudah belajar tentang transisi dan animasi di Alpine.js yang membuat tampilan lebih interaktif dan menarik. Kali ini, kita akan membahas topik yang penting untuk membuat aplikasi yang lebih modular dan terstruktur, yaitu Interaksi Antar Component.

Dalam Alpine.js, kita bisa membuat beberapa komponen kecil dan mandiri, lalu mengatur komunikasi di antara mereka. Hal ini sangat berguna ketika kita membangun aplikasi yang kompleks, seperti dashboard, form multi-step, atau komponen yang saling tergantung.

Apa Itu Component di Alpine.js?

Komponen di Alpine.js adalah elemen HTML yang diberi x-data. Setiap x-data memiliki state dan perilaku sendiri, yang bersifat terisolasi dari komponen lainnya, kecuali jika kita menghubungkannya secara eksplisit.

Contoh dasar:

<div x-data="{ pesan: 'Halo Dunia!' }">
  <p x-text="pesan"></p>
</div>

Tantangan: Bagaimana Komponen Saling Berkomunikasi?

Karena x-data bersifat lokal, kita butuh mekanisme untuk saling berkomunikasi antar komponen. Beberapa cara yang bisa digunakan di Alpine.js:

1. Custom Event dengan $dispatch dan Event Listener
2. Store Global dengan $store
3. x-ref + $refs (dalam satu hirarki DOM)

1. Komunikasi dengan $dispatch

Kita bisa mengirim event dari satu komponen dan menangkapnya di komponen lain, terutama pada level parent.

Contoh: Komponen Anak Kirim Event ke Komponen Induk

<!-- Komponen Induk -->
<div x-data @notifikasi.window="alert($event.detail)">
  <div x-data>
    <button @click="$dispatch('notifikasi', 'Halo dari Komponen Anak!')">
      Kirim Pesan
    </button>
  </div>
</div>

Keterangan:

• .window digunakan agar event bisa didengarkan di level global
• $event.detail berisi data yang dikirim

2. Komunikasi dengan Store Global ($store)

Jika kita ingin menyimpan state global yang bisa diakses lintas komponen, kita bisa menggunakan fitur store.

• Inisialisasi Store:

  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.store('auth', {
        login: false,
        toggle() {
          this.login = !this.login
        }
      })
    })
  </script>
  

• Komponen 1: Tombol Toggle

  <div x-data>
    <button @click="$store.auth.toggle()">Login/Logout</button>
  </div>
  

• Komponen 2: Status Login

  <div x-data>
    <p x-text="$store.auth.login ? 'Sedang Login' : 'Belum Login'"></p>
  </div>
  

3. Mengakses Elemen via $refs

Jika dua komponen berada dalam satu hirarki DOM, kita bisa menggunakan x-ref untuk mengakses elemen dari komponen anak.

<div x-data="{ fokusKeInput() { $refs.nama.focus() } }">
  <input x-ref="nama" type="text" placeholder="Nama">
  <button @click="fokusKeInput()">Fokus ke Input</button>
</div>

Kesimpulan

Di artikel ini, kita sudah belajar bagaimana cara melakukan interaksi antar komponen di Alpine.js. Kita bisa menggunakan:

• $dispatch untuk komunikasi berbasis event
• $store untuk state global yang dapat diakses lintas komponen
• $refs untuk mengontrol elemen dalam satu komponen

Dengan memahami interaksi antar komponen, kita bisa membangun aplikasi web yang lebih modular dan scalable.

Di seri selanjutnya, kita akan belajar tentang Fetch API di Alpine.js, supaya aplikasi kita bisa mengambil data dari server secara real-time.

Terima Kasih