Parent-Child Communication in Livewire v4

Livewire v4 provides multiple ways for component communication.

Props - Passing Data Down

// Parent Component View


// Child Component
class ChildComponent extends Component
{
    public User $user;
    public Collection $posts;
    public string $title;
    
    public function mount(User $user, Collection $posts, string $title): void
    {
        $this->user = $user;
        $this->posts = $posts;
        $this->title = $title;
    }
}

Events - Dispatching Up

// Child Component - dispatch event to parent
class ItemSelector extends Component
{
    public function selectItem(int $id): void
    {
        $this->dispatch('item-selected', id: $id, name: 'Product');
    }
}

// Parent Component - listen for event
class ParentComponent extends Component
{
    public ?int $selectedItemId = null;
    
    #[On('item-selected')]
    public function handleSelection(int $id, string $name): void
    {
        $this->selectedItemId = $id;
        session()->flash('message', "Selected: {$name}");
    }
}

Two-Way Binding with wire:model

// Parent using wire:model



// Child Component (ColorPicker)
class ColorPicker extends Component
{
    #[Modelable]
    public string $value = '#000000';
    
    public function render()
    {
        return view('livewire.color-picker');
    }
}