Blade Components คือฟีเจอร์ของ Blade Template ใน Laravel ที่ช่วยให้เราสามารถสร้างส่วนประกอบ UI ที่ใช้ซ้ำได้ ทำให้การจัดการและการพัฒนาอินเทอร์เฟซมีความสะดวกมากขึ้น โดย Components ช่วยให้การเขียนโค้ดสะอาด ลดความซ้ำซ้อน และทำให้การออกแบบหน้าเว็บเป็นไปอย่างมีระบบมากขึ้น

การสร้าง Blade Component

เราสามารถสร้าง Component ได้ง่ายๆ โดยใช้คำสั่ง Artisan:

php artisan make:component Alert

คำสั่งนี้จะสร้างไฟล์สองไฟล์ คือ

1. ไฟล์ View ของ Component ที่ resources/views/components/alert.blade.php
2. ไฟล์คลาสของ Component ที่ app/View/Components/Alert.php

การสร้าง View สำหรับ Component

ในไฟล์ alert.blade.php ซึ่งเป็น View ของ Component เราสามารถกำหนดโค้ด HTML ที่ต้องการใช้งานซ้ำได้ ตัวอย่างเช่น การแสดงข้อความแจ้งเตือน:

<!-- resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

ในตัวอย่างนี้ เราใช้ตัวแปร $type เพื่อกำหนดประเภทของการแจ้งเตือน และใช้ {{ $slot }} เพื่อแสดงข้อความใน Component ซึ่งจะถูกแทนที่ด้วยเนื้อหาที่เราส่งเข้าไปใน Component

การกำหนดตัวแปรใน Component Class

ในไฟล์ Alert.php ซึ่งเป็นคลาสของ Component เราสามารถกำหนดตัวแปรและค่าเริ่มต้นของ Component ได้ เช่น ประเภทของการแจ้งเตือน (type):

// app/View/Components/Alert.php
namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;

    public function __construct($type = 'info')
    {
        $this->type = $type;
    }

    public function render()
    {
        return view('components.alert');
    }
}

ในตัวอย่างนี้ ตัวแปร $type จะมีค่าเริ่มต้นเป็น info แต่สามารถเปลี่ยนได้เมื่อเรียกใช้ Component

การใช้ Component ใน Blade Template

เราสามารถเรียกใช้ Component ใน Blade Template ได้ดังนี้:

<x-alert type="success">
    บันทึกข้อมูลเรียบร้อยแล้ว!
</x-alert>

<x-alert type="error">
    มีข้อผิดพลาดเกิดขึ้น!
</x-alert>

ในตัวอย่างนี้ เราเรียกใช้ Component alert โดยระบุประเภท (type) และกำหนดข้อความที่จะถูกแสดงใน {{ $slot }} ของ Component

การใช้ Inline Blade Component

เราสามารถสร้าง Blade Component แบบ Inline ได้โดยไม่ต้องสร้างคลาส โดยสร้างไฟล์ .blade.php ไว้ใน resources/views/components เช่น button.blade.php

ตัวอย่างไฟล์ button.blade.php:

<!-- resources/views/components/button.blade.php -->
<button {{ $attributes->merge(['class' => 'btn btn-primary']) }}>
    {{ $slot }}
</button>

จากนั้นเรียกใช้ Component นี้ได้โดยตรงใน View อื่นๆ:

<x-button>คลิกที่นี่</x-button>

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

Blade Components ช่วยให้เราสร้างส่วนประกอบ UI ที่สามารถใช้ซ้ำได้ ซึ่งช่วยลดความซ้ำซ้อนและทำให้โค้ดมีความสะอาด อ่านง่ายมากขึ้น สามารถนำไปใช้ในหลายๆ หน้าหรือใน Layout ต่างๆ เพื่อสร้างองค์ประกอบ UI ที่เป็นมาตรฐานและปรับปรุงการจัดการอินเทอร์เฟซในแอปพลิเคชัน