Parent-Child Communication in Livewire v4

// Parent Component View
<livewire:child-component 
    :user="$user"
    :posts="$posts"
    title="Dashboard"
/>

// 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;
    }
}

// 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}");
    }
}

// Parent using wire:model
<livewire:color-picker wire:model="selectedColor" />
<livewire:date-picker wire:model.live="startDate" />

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