التواصل بين الأب والابن في Livewire v4

يوفر Livewire v4 طرقًا متعددة لتواصل المكونات.

الخصائص - تمرير البيانات للأسفل

// عرض المكون الأب


// المكون الابن
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;
    }
}

الأحداث - الإرسال للأعلى

// المكون الابن - إرسال حدث للأب
class ItemSelector extends Component
{
    public function selectItem(int $id): void
    {
        $this->dispatch('item-selected', id: $id, name: 'منتج');
    }
}

// المكون الأب - الاستماع للحدث
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', "تم اختيار: {$name}");
    }
}

الربط ثنائي الاتجاه مع wire:model

// الأب يستخدم wire:model



// المكون الابن (ColorPicker)
class ColorPicker extends Component
{
    #[Modelable]
    public string $value = '#000000';
    
    public function render()
    {
        return view('livewire.color-picker');
    }
}