# Blade Components
Laravel Blade Components cung cấp một cách tiện lợi để xây dựng các phần tử HTML tái sử dụng, giúp bạn tổ chức mã nguồn một cách rõ ràng và hiệu quả hơn. Blade Components cho phép bạn tách biệt logic và giao diện, giúp việc phát triển và bảo trì ứng dụng trở nên dễ dàng hơn.
1. Tạo Blade Components
Tạo Component Bằng Lệnh Artisan
Bạn có thể sử dụng lệnh Artisan để tạo một component:
php artisan make:component Alert
Lệnh này sẽ tạo hai file:
- Một class component tại
app/View/Components/Alert.php - Một view Blade tại
resources/views/components/alert.blade.php
File Class Component
File: app/View/Components/Alert.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Alert extends Component
{
public $type;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($type)
{
$this->type = $type;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.alert');
}
}
File View Component
File: resources/views/components/alert.blade.php
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
2. Sử Dụng Blade Components
Nhúng Component Trong View
Bạn có thể nhúng component trong view Blade bằng cú pháp <x-component-name>:
File: resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>
<body>
<x-alert type="success">
This is a success alert.
</x-alert>
<x-alert type="danger">
This is a danger alert.
</x-alert>
</body>
</html>
3. Truyền Dữ Liệu Cho Component
Bạn có thể truyền dữ liệu cho component thông qua các thuộc tính:
File: app/View/Components/Alert.php
public $type;
public function __construct($type)
{
$this->type = $type;
}
File: resources/views/components/alert.blade.php
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
File: resources/views/welcome.blade.php
<x-alert type="success">
This is a success alert.
</x-alert>
<x-alert type="danger">
This is a danger alert.
</x-alert>
4. Slots
Slots cho phép bạn xác định các phần nội dung động trong component. Mặc định, tất cả nội dung được truyền vào component sẽ nằm trong biến $slot.
Slots Mặc Định
File: resources/views/components/alert.blade.php
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
File: resources/views/welcome.blade.php
<x-alert type="success">
This is a success alert.
</x-alert>
Named Slots
Bạn có thể tạo nhiều slots với tên khác nhau.
File: resources/views/components/alert.blade.php
<div class="alert alert-{{ $type }}">
<div class="alert-title">{{ $title }}</div>
{{ $slot }}
</div>
File: resources/views/welcome.blade.php
<x-alert type="success">
<x-slot name="title">
Success
</x-slot>
This is a success alert.
</x-alert>
5. Inline Components
Nếu component của bạn đơn giản và không yêu cầu logic phức tạp, bạn có thể sử dụng Inline Components mà không cần tạo file class riêng.
File: resources/views/components/button.blade.php
<button {{ $attributes->merge(['class' => 'btn btn-primary']) }}>
{{ $slot }}
</button>
File: resources/views/welcome.blade.php
<x-button>
Click Me
</x-button>
Tóm Tắt
- Tạo Component: Sử dụng lệnh Artisan để tạo component.
- Nhúng Component: Sử dụng cú pháp
<x-component-name>để nhúng component trong view. - Truyền Dữ Liệu: Truyền dữ liệu cho component thông qua các thuộc tính.
- Slots: Sử dụng slots để xác định nội dung động trong component.
- Inline Components: Sử dụng Inline Components cho các component đơn giản.
Blade Components giúp mã nguồn của bạn trở nên sạch sẽ, dễ đọc và dễ bảo trì hơn. Việc tách biệt giao diện và logic giúp bạn tập trung vào từng khía cạnh riêng biệt của ứng dụng, làm cho quá trình phát triển trở nên hiệu quả hơn.
Danh mục
Bài viết liên quan
Blade Basics
| Author: | ADMIN |
|---|
Hiển thị giá trị trong Blade
| Author: | ADMIN |
|---|
Layout: @include, @extends, @section, @yield
| Author: | ADMIN |
|---|
Bài viết khác
Blade Basics
| Author: | ADMIN |
|---|
9 Mẹo Hữu Ích Khi Sử Dụng Blade Trong Laravel
| Author: | ADMIN |
|---|
Hiển thị giá trị trong Blade
| Author: | ADMIN |
|---|