Команда make:component

Команда make:component создаёт новый компонент Blade в приложении Laravel. Компоненты позволяют инкапсулировать логику и представление в переиспользуемые блоки. При вызове команды необходимо указать имя компонента. По умолчанию компонент создаётся в каталоге app/View/Components, а представление - в resources/views/components. Команда поддерживает создание как анонимных компонентов, так и классовых, а также позволяет указывать вложенную структуру каталогов через точечную нотацию или слеши.

Синтаксис

php artisan make:component ComponentName

# С опцией --force для перезаписи существующего компонента
php artisan make:component ComponentName --force

# Для создания инлайн-компонента
php artisan make:component ComponentName --inline

# Для создания анонимного компонента
php artisan make:component ComponentName --view

Пример

Давайте создадим компонент для отображения карточки статьи. Выполним команду:

php artisan make:component ArticleCard

После выполнения команды будут созданы два файла:

<?php
	namespace App\View\Components;
	
	use Closure;
	use Illuminate\Contracts\View\View;
	use Illuminate\View\Component;
	
	class ArticleCard extends Component
	{
		public function __construct()
		{
			//
		}
		
		public function render(): View|Closure|string
		{
			return view('components.article-card');
		}
	}
?>

<div>
	<!-- Article card content -->
</div>

Пример

Создадим компонент с передачей данных через конструктор. Компонент будет принимать заголовок и текст статьи:

php artisan make:component ArticleContent

<?php
	namespace App\View\Components;
	
	use Closure;
	use Illuminate\Contracts\View\View;
	use Illuminate\View\Component;
	
	class ArticleContent extends Component
	{
		public string $title;
		public string $content;
		
		public function __construct(string $title, string $content)
		{
			$this->title = $title;
			$this->content = $content;
		}
		
		public function render(): View|Closure|string
		{
			return view('components.article-content');
		}
	}
?>

<div class="article">
	<h2>{{ $title }}</h2>
	<p>{{ $content }}</p>
</div>

Используем созданный компонент в Blade-шаблоне:

<x-article-content 
	title="Understanding Laravel" 
	content="Laravel is a powerful PHP framework."
/>

Результат выполнения кода:

<div class="article">
	<h2>Understanding Laravel</h2>
	<p>Laravel is a powerful PHP framework.</p>
</div>

Пример

Создадим анонимный компонент без класса-обработчика с помощью опции --view:

php artisan make:component user-profile --view

<div class="profile">
	<h3>User Profile</h3>
	<p>Name: {{ $name ?? 'Guest' }}</p>
	<p>Email: {{ $email ?? 'N/A' }}</p>
</div>

Используем анонимный компонент в представлении:

<x-user-profile :name="$userName" :email="$userEmail" />

Результат выполнения кода при передаче данных:

"User Profile Name: John Doe Email: john@example.com"

Пример

Создадим компонент с вложенной структурой каталогов. Используем точечную нотацию для указания пути:

php artisan make:component admin.dashboard.stats

<?php
	namespace App\View\Components\Admin\Dashboard;
	
	use Closure;
	use Illuminate\Contracts\View\View;
	use Illuminate\View\Component;
	
	class Stats extends Component
	{
		public array $statistics;
		
		public function __construct(array $statistics = [])
		{
			$this->statistics = $statistics;
		}
		
		public function render(): View|Closure|string
		{
			return view('components.admin.dashboard.stats');
		}
	}
?>

<div class="stats-grid">
	@foreach ($statistics as $stat)
		<div class="stat-item">
			<span class="label">{{ $stat['label'] }}</span>
			<span class="value">{{ $stat['value'] }}</span>
		</div>
	@endforeach
</div>

Используем вложенный компонент в Blade-шаблоне:

@php
	$stats = [
		['label' => 'Users', 'value' => 150],
		['label' => 'Posts', 'value' => 450],
	];
@endphp

<x-admin.dashboard.stats :statistics="$stats" />

Результат выполнения кода:

<div class="stats-grid">
	<div class="stat-item">
		<span class="label">Users</span>
		<span class="value">150</span>
	</div>
	<div class="stat-item">
		<span class="label">Posts</span>
		<span class="value">450</span>
	</div>
</div>

Смотрите также

команда make-model,
которая создаёт новую модель Eloquent
команда make-controller,
которая создаёт новый контроллер
команда make-request,
которая создаёт новый класс запроса валидации
команда make-middleware,
которая создаёт новый middleware