Класс Component

Класс Component является базовым для всех компонентов в Laravel Blade. Он предоставляет функциональность для создания многократно используемых частей интерфейса, позволяет передавать данные, определять слоты и управлять рендерингом. Компоненты могут быть как анонимными, так и классовыми, причём классовые компоненты дают больше возможностей для организации логики.

Создание компонента

Для создания компонента используется Artisan команда:

<?php
	php artisan make:component Alert
?>

Эта команда создаст два файла: класс компонента в app/View/Components и шаблон в resources/views/components.

Синтаксис

Класс компонента наследуется от Component и реализует метод render, который должен возвращать представление:

<?php
	namespace AppViewComponents;

	use IlluminateViewComponent;

	class Alert extends Component
	{
		public $type;
		public $message;

		public function __construct($type, $message)
		{
			$this->type = $type;
			$this->message = $message;
		}

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

Пример

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

<div class="alert alert-{{ $type }}">
	{{ $message }}
	{{ $slot }}
</div>

<x-alert type="success" message="Operation completed successfully">
	Additional information
</x-alert>

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

<div class="alert alert-success">
	Operation completed successfully
	Additional information
</div>

Пример

Компонент с методом для определения необходимости рендеринга через shouldRender:

<?php
	namespace AppViewComponents;

	use IlluminateViewComponent;

	class Visibility extends Component
	{
		public $show;

		public function __construct($show = true)
		{
			$this->show = $show;
		}

		public function shouldRender()
		{
			return $this->show;
		}

		public function render()
		{
			return view('components.visibility');
		}
	}
?>

<div>
	This content is visible
</div>

<x-visibility :show="true" />
<x-visibility :show="false" />

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

<div>
	This content is visible
</div>

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

метод render,
который возвращает представление компонента
метод shouldRender,
который определяет нужно ли рендерить компонент
атрибут slot,
который используется для работы со слотами
атрибут attributes,
который управляет передачей HTML-атрибутов