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

ตัวอย่างการใช้งาน Event ใน Component

สร้าง Component สำหรับจัดการ Event เราจะสร้าง Component ชื่อ Counter ที่มีฟังก์ชันเพิ่มและลดค่าตัวแปร $count เมื่อตัวแปรนี้มีการเปลี่ยนแปลงก็จะเรียก Event อื่นใน Component ให้ทำงานด้วย ใช้คำสั่งต่อไปนี้เพื่อสร้าง Component:

php artisan make:livewire Counter

เพิ่มตัวแปรและฟังก์ชันใน Component (Counter.php) เปิดไฟล์ Counter.php และสร้างตัวแปร $count สำหรับเก็บค่า และสร้างฟังก์ชัน increment และ decrement เพื่อจัดการการเพิ่มและลดค่าตัวแปร จากนั้นกำหนด Event updatedCount เพื่อทำงานเมื่อค่าของ $count เปลี่ยนแปลง:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
        $this->emit('updatedCount', $this->count); // เรียก Event เมื่อมีการเพิ่มค่า
    }

    public function decrement()
    {
        $this->count--;
        $this->emit('updatedCount', $this->count); // เรียก Event เมื่อมีการลดค่า
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

emit เป็นฟังก์ชันที่ใช้สำหรับส่ง Event ไปยังฟังก์ชันอื่น ๆemit('updatedCount', $this->count) ใช้ส่งค่า $count ที่เปลี่ยนแปลงไปยัง Event updatedCount

การจัดการ Event ใน View (counter.blade.php) ใน Blade View เราจะแสดงค่าของ $count และเพิ่มปุ่มสำหรับเพิ่มและลดค่า เมื่อมีการกดปุ่ม จะเรียกใช้ฟังก์ชัน increment และ decrement เพื่อจัดการค่า $count:

<div>
    <h1>Count: {{ $count }}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>

การใช้งาน Listener เพื่อรับ Event นอกจากนี้เราสามารถสร้าง Listener สำหรับรับฟัง Event updatedCount ใน Component อื่นหรือที่เดิมได้ ในที่นี้สมมุติว่ามี Component ชื่อ CounterLogger ที่จะบันทึกค่าเมื่อมีการอัปเดตค่า count เราสร้าง Component CounterLogger:

php artisan make:livewire CounterLogger

จากนั้นเปิดไฟล์ CounterLogger.php และใช้ Listener เพื่อฟัง Event updatedCount:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class CounterLogger extends Component
{
    public $log = [];

    protected $listeners = ['updatedCount' => 'updateLog'];

    public function updateLog($count)
    {
        $this->log[] = "Count updated to: $count";
    }

    public function render()
    {
        return view('livewire.counter-logger');
    }
}

• $listeners ใช้สำหรับกำหนด Listener เพื่อฟัง Event ที่เกิดขึ้นใน Component อื่น
• ฟังก์ชัน updateLog จะทำงานเมื่อมี Event updatedCount โดยบันทึกค่า $count ในอาร์เรย์ $log

การแสดงผลใน View ของ CounterLogger (counter-logger.blade.php) ใน View ของ CounterLogger ให้แสดงรายการที่บันทึกใน $log:

<div>
    <h2>Log:</h2>
    <ul>
        @foreach ($log as $entry)
            <li>{{ $entry }}</li>
        @endforeach
    </ul>
</div>

การแสดง Component ทั้งสองใน Blade Template เพื่อให้การทำงานของ Component ทั้งสองแสดงในหน้าเดียวกัน สามารถเพิ่ม Component เหล่านี้ในหน้า home.blade.php ดังนี้:

@livewire('counter')
@livewire('counter-logger')

ผลลัพธ์ที่ได้ เมื่อกดปุ่ม + หรือ - ใน Component Counter ค่า $count จะเปลี่ยนแปลงและ Event updatedCount จะถูกส่งไปยัง CounterLogger เพื่อแสดงบันทึกการอัปเดตในรายการ Log แบบ Real-Time

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

Event ใน Livewire มีประโยชน์ในการสร้างการโต้ตอบระหว่าง Component ที่แยกกัน ทำให้แอปพลิเคชันสามารถตอบสนองการกระทำของผู้ใช้ได้แบบทันที สามารถนำไปใช้ได้ในกรณีเช่น:

• การอัปเดตข้อมูลที่เชื่อมโยงกันใน Component หลายตัว เช่น การกรองข้อมูลและการแสดงผล
• การส่ง Event ระหว่าง Component เพื่อจัดการการเปลี่ยนแปลงแบบ Real-Time
• การสร้างระบบแจ้งเตือนหรือการบันทึกการเปลี่ยนแปลงต่าง ๆ