ใน Livewire การสื่อสารระหว่าง Component หลายตัวสามารถทำได้ผ่าน Event ซึ่งช่วยให้ Component ต่าง ๆ สามารถสื่อสารและส่งข้อมูลถึงกันได้โดยไม่ต้องเชื่อมโยงกันโดยตรง การส่ง Event ระหว่าง Component มีความสำคัญเมื่อคุณต้องการสร้างระบบที่มีการทำงานร่วมกันระหว่างส่วนต่าง ๆ เช่น การอัปเดตข้อมูลในส่วนหนึ่งแล้วกระทบกับอีกส่วนหนึ่ง

Livewire สนับสนุนการส่ง Event แบบ Global และ Local:

• Global Event: ส่ง Event ที่ Component ใด ๆ ก็สามารถรับฟังได้
• Local Event: ส่ง Event ระหว่าง Component ที่มีความสัมพันธ์กัน เช่น Parent และ Child

ตัวอย่างการส่ง Event ระหว่าง Component หลายตัว

สร้าง Component สำหรับส่ง Event เราจะสร้าง Component ชื่อ ParentComponent และ ChildComponent โดย Parent จะส่ง Event และ Child จะรับ Event เพื่อทำการอัปเดตข้อมูล ใช้คำสั่งต่อไปนี้:

php artisan make:livewire ParentComponent php artisan make:livewire ChildComponent

การเขียนโค้ดใน Parent Component (ParentComponent.php) ใน Parent Component เราจะส่ง Event เมื่อผู้ใช้คลิกปุ่ม:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ParentComponent extends Component
{
    public function sendMessage()
    {
        $this->emit('messageSent', 'Hello from Parent Component!');
    }

    public function render()
    {
        return view('livewire.parent-component');
    }
}

การเขียนโค้ดใน Child Component (ChildComponent.php) ใน Child Component เราจะรับ Event messageSent และอัปเดตข้อความที่แสดงใน Component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ChildComponent extends Component
{
    public $message = 'Waiting for message...';

    protected $listeners = ['messageSent' => 'updateMessage'];

    public function updateMessage($message)
    {
        $this->message = $message;
    }

    public function render()
    {
        return view('livewire.child-component');
    }
}

• $listeners: กำหนด Event ที่ Component จะรับฟัง
• updateMessage: ฟังก์ชันที่จะทำงานเมื่อรับ Event พร้อมอัปเดตตัวแปร $message

สร้าง UI ใน Blade View

Parent Component (parent-component.blade.php):

<div>
    <h2>Parent Component</h2>
    <button wire:click="sendMessage">Send Message to Child</button>
</div>

Child Component (child-component.blade.php):

<div>
    <h2>Child Component</h2>
    <p>Message: {{ $message }}</p>
</div>

การแสดง Component ใน Blade Template เพิ่มทั้งสอง Component ลงในหน้า Blade Template เช่น home.blade.php:

@livewire('parent-component')
@livewire('child-component')

ผลลัพธ์ที่ได้

• เมื่อผู้ใช้กดปุ่ม “Send Message to Child” ใน Parent Component ระบบจะส่ง Event messageSent ไปยัง Child Component
• Child Component จะรับ Event และอัปเดตข้อความจาก “Waiting for message…” เป็น “Hello from Parent Component!”

การใช้งาน Event แบบ Local (Parent-Child Relationship)

สำหรับการส่ง Event ระหว่าง Parent และ Child Component ที่มีความสัมพันธ์โดยตรง (Parent เรียกใช้ Child) สามารถใช้ emitTo เพื่อกำหนด Component ที่เฉพาะเจาะจง:

ใน Parent Component:

$this->emitTo('child-component', 'messageSent', 'Hello specifically to Child!');

ใน Child Component: $listeners ยังคงใช้เหมือนเดิม แต่ Event นี้จะรับเฉพาะจาก Parent Component ที่ส่งให้เท่านั้น

การนำไปใช้งาน

การส่ง Event ระหว่าง Component เหมาะสำหรับ:

• การจัดการ UI หลายส่วนที่ต้องการการทำงานร่วมกัน เช่น การอัปเดตข้อมูลในตารางเมื่อผู้ใช้เลือกตัวกรอง
• การแจ้งเตือนระหว่าง Component เช่น การแสดงข้อความแจ้งเตือนใน Modal เมื่อทำรายการสำเร็จ
• การสร้างระบบ Parent-Child ที่ต้องการควบคุมการทำงานของ Child Component จาก Parent Component

ประโยชน์ของการใช้ Event ใน Livewire

• ช่วยลดการเขียนโค้ดที่ซับซ้อนในการเชื่อมโยง Component หลายตัว
• ทำให้ Component แยกจากกันได้อย่างอิสระและยังสื่อสารกันได้
• เพิ่มความยืดหยุ่นในการพัฒนา Web Application