Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 4: การสื่อสารระหว่าง Component และ View

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

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

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

    1
    php artisan make:livewire UserGreeting

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <?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 เพื่อให้ผู้ใช้สามารถแก้ไขชื่อได้:

    1
    2
    3
    4
    <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:

    1
    @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 ทำให้โค้ดอ่านง่ายและพัฒนาได้รวดเร็วกว่า