Belajar Livewire - Events & Komunikasi Antar Komponen

#Pendahuluan

Sejauh ini semua contoh memakai satu komponen mandiri. Di aplikasi nyata, satu halaman berisi banyak komponen — header, sidebar, form, daftar data — yang saling memengaruhi. Menghapus sebuah item di daftar harus memperbarui badge jumlah; menyimpan form harus menutup modal di komponen lain.

Di episode ini kita belajar events: mekanisme resmi agar komponen saling berkomunikasi tanpa saling tahu detail internal satu sama lain. Ini adalah konsep decoupling — komponen berbicara lewat pesan, bukan lewat memanggil kode satu sama lain secara langsung.

#Mengirim Event dengan $this->dispatch

Komponen mengirim event lewat method dispatch:

$this->dispatch('post-created');

Event ini bisa didengar oleh komponen lain di halaman yang sama. Saat event diterima, listener dijalankan dan komponen penerima merender ulang.

$this->dispatch('post-created', postId: $post->id);

Parameter bernama (postId:) membuat payload lebih ekspresif dan tidak mudah salah urut. Di sisi penerima, parameter ini muncul sebagai argumen method listener.

#Menargetkan event

Secara default event disiarkan ke seluruh komponen di halaman. Kalian bisa mempersempit cakupan:

$this->dispatch('post-created')->self();         // hanya komponen ini
$this->dispatch('post-created')->to(StatsPanel::class); // komponen spesifik
$this->dispatch('post-created');                 // semua komponen

#Mendengarkan Event dengan #[On]

Listener dideklarasikan dengan attribute #[On]:

<?php
 
namespace App\Livewire;
 
use Livewire\Attributes\On;
use Livewire\Component;
 
class StatsPanel extends Component
{
    public int $postCount = 0;
 
    public function mount()
    {
        $this->postCount = Post::count();
    }
 
    #[On('post-created')]
    public function refreshStats(int $postId)
    {
        $this->postCount = Post::count();
    }
}

Saat komponen lain mengirim post-created, method refreshStats() dijalankan dan $postCount diperbarui. Perhatikan bahwa method-nya tidak perlu public — #[On] cukup untuk mendaftarkannya sebagai listener.

#Event dengan Wildcard

#[On] mendukung wildcard untuk mendengar banyak event sekaligus:

#[On('post.*')]
public function handlePostEvent(string $event, array $params)
{
    // $event berisi nama event penuh, misal "post.created"
    // $params berisi parameter yang dikirim
}

Ini berguna saat banyak komponen mengirim varian event post.created, post.updated, post.deleted dan kalian ingin menanganinya dengan satu listener.

#Komunikasi Parent-Child

Saat komponen memang disusun berpasangan (parent merender child), ada dua pola:

#1. Props biasa (one-way, sekali)

Parent mengirim nilai saat render, child menerimanya di mount():

<livewire:post-count :count="$posts->count()" />

public function mount(int $count)
{
    $this->count = $count;
}

Pola ini statis: jika $count berubah di parent, child tidak otomatis ikut berubah.

#2. Reactive props (two-way, live)

Dengan attribute #[Reactive], perubahan nilai prop di parent langsung memicu render ulang child:

<?php
 
namespace App\Livewire;
 
use Livewire\Attributes\Reactive;
use Livewire\Component;
 
class PostCount extends Component
{
    #[Reactive]
    public int $count = 0;
 
    public function render()
    {
        return view('livewire.post-count');
    }
}

<div>
    <livewire:post-count :count="$posts->count()" />
 
    <button wire:click="addPost">Tambah post</button>
</div>

Setiap kali parent mengubah data yang memengaruhi $posts->count(), child PostCount ikut merender ulang secara otomatis. Kombinasi ini adalah pola paling rapi untuk widget statistik, badge jumlah, atau daftar yang saling bergantung.

#Pola Nyata: Form + Stats

Mari gabungkan semuanya dalam satu skenario:

public function save()
{
    $post = Post::create([
        'title' => $this->title,
    ]);
 
    $this->dispatch('post-created', postId: $post->id);
 
    $this->reset('title');
}

• CreatePost mengirim post-created setelah menyimpan.
• StatsPanel mendengarnya dan memperbarui jumlah.
• Keduanya tetap komponen terpisah yang bisa diuji dan diubah secara independen.

#Pitfall Umum

• Listener tidak dipanggil: pastikan nama event cocok persis, dan kedua komponen berada di halaman yang sama. Perhatikan ->self() yang membatasi ke komponen pengirim.
• Parameter tidak sampai: gunakan named parameters (postId: $post->id) dan sesuaikan nama argumen di method listener.
• Menggunakan event untuk parent-child sederhana: untuk satu level saja, reactive props lebih ringkas daripada event.
• Event untuk logika bisnis internal: event sebaiknya untuk komunikasi antar komponen, bukan pengganti method call di komponen yang sama.

#Penutup

Inti yang harus dibawa pulang:

• Kirim event dengan $this->dispatch('nama-event', param: nilai); dengarkan dengan #[On('nama-event')].
• Cakupan event: ->self(), ->to(Class::class), atau broadcast default ke semua.
• #[On('post.*')] untuk wildcard; method listener menerima $event dan $params.
• Parent-child: props biasa (statis) vs #[Reactive] (live, ikut render ulang).
• Event unggul untuk komponen yang tidak bertingkat atau ingin benar-benar terpisah.

Di episode 8 selanjutnya kita akan membahas rendering & layout — menyusun layout dengan komponen <x-layout>, sectioning untuk memecah halaman, dynamic page titles, dan modularisasi UI (header, sidebar, content) sebagai komponen. Sampai jumpa di episode 8!