ใน Livewire การสื่อสารระหว่าง Component และ View สามารถทำได้ง่าย ๆ โดยใช้ Properties (ตัวแปร) ซึ่งช่วยให้ View สามารถดึงข้อมูลจาก Component ได้ และยังสามารถส่งข้อมูลกลับไปที่ Component ได้ด้วยการอัปเดตค่าแบบ Real-Time ตัวอย่างที่พบบ่อยคือ การใช้งานฟอร์มหรือการโต้ตอบต่าง ๆ ที่มีการส่งข้อมูลระหว่าง UI และ Logic ที่อยู่ใน Backend

ขั้นตอนการสื่อสารระหว่าง Component และ View

สร้าง Component ที่มี Property ในตัวอย่างนี้ เราจะสร้าง Component ชื่อ UserGreeting ซึ่งจะมี Property $name สำหรับเก็บชื่อของผู้ใช้ โดยการใช้คำสั่ง:

php artisan make:livewire UserGreeting

การตั้งค่า Property ใน Component (UserGreeting.php) เปิดไฟล์ UserGreeting.php ในโฟลเดอร์ app/Http/Livewire และสร้าง Property ชื่อ $name พร้อมกำหนดค่าเริ่มต้น จากนั้นใช้ render เพื่อส่งค่า $name ไปยัง View:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class UserGreeting extends Component
{
    public $name = 'Guest';

    public function render()
    {
        return view('livewire.user-greeting');
    }
}

แสดงผลใน Blade View (user-greeting.blade.php) ใน View เราสามารถดึงค่า $name จาก Component มาแสดงผล และใช้การ Binding แบบสองทิศทางด้วย wire:model เพื่อให้ผู้ใช้สามารถแก้ไขชื่อได้:

<div>
    <h1>Hello, {{ $name }}!</h1>
    <input type="text" wire:model="name" placeholder="Enter your name">
</div>

• {{ $name }} ใช้แสดงค่าของ Property $name
• wire:model="name" ใช้สำหรับ Binding ฟิลด์กรอกข้อมูลกับตัวแปร $name ใน Component แบบ Two-Way Data Binding ซึ่งจะอัปเดตค่าใน Component แบบอัตโนมัติเมื่อมีการเปลี่ยนแปลงจาก View

การเรียกใช้ Component ใน Blade Template เพื่อแสดง Component นี้ในหน้าที่ต้องการ ให้ใช้คำสั่ง @livewire ใน Blade Template เช่นใน home.blade.php:

@livewire('user-greeting')

ผลลัพธ์ที่ได้ เมื่อผู้ใช้พิมพ์ชื่อในช่องกรอกข้อมูล (input field) ชื่อที่แสดงใน <h1>Hello, {{ $name }}!</h1> จะอัปเดตตามที่ผู้ใช้พิมพ์แบบทันที เนื่องจากมีการสื่อสารระหว่าง View และ Component ผ่าน Two-Way Data Binding โดยไม่ต้องรีเฟรชหน้า

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

การสื่อสารระหว่าง Component และ View ผ่าน Property เหมาะสำหรับ:

• การทำฟอร์มกรอกข้อมูลแบบ Interactive ที่สามารถตรวจสอบข้อมูลได้ทันที
• การแสดงข้อมูลที่ต้องการอัปเดตแบบ Real-Time ตามการโต้ตอบของผู้ใช้
• การสร้าง UI ที่ปรับเปลี่ยนตามข้อมูลที่ผู้ใช้กรอกหรือเลือก

Livewire ช่วยลดการเขียนโค้ด JavaScript สำหรับการอัปเดตค่าใน UI ทำให้โค้ดอ่านง่ายและพัฒนาได้รวดเร็วกว่า