Именованный слот

Именованный слот позволяет передавать в компонент несколько независимых блоков контента, каждый из которых имеет своё имя. Это удобно для создания сложных макетов, где требуется разместить контент в разных частях компонента, например, заголовок, основное содержимое и подвал. В Blade-шаблоне компонента для вывода именованного слота используется директива @slot с указанием имени.

Создание компонента с именованными слотами

Создадим компонент Card, который будет использовать два именованных слота: header и footer. В Blade-шаблоне компонента определим эти слоты с помощью директивы @slot:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Card extends Component
	{
		public function render()
		{
			return view('livewire.card');
		}
	}
?>

<div class="card">
	<div class="card-header">
		{{-- Вывод содержимого слота 'header' --}}
		@slot('header')
			Default Header
		@endslot
	</div>
	<div class="card-body">
		{{-- Вывод основного содержимого --}}
		{{ $slot }}
	</div>
	<div class="card-footer">
		{{-- Вывод содержимого слота 'footer' --}}
		@slot('footer')
			Default Footer
		@endslot
	</div>
</div>

Теперь при использовании компонента мы можем передать содержимое для каждого слота:

<livewire:card>
	<x-slot name="header">
		<h2>Заголовок карточки</h2>
	</x-slot>
	
	<p>Основное содержимое карточки.</p>
	
	<x-slot name="footer">
		<small>Подвал карточки</small>
	</x-slot>
</livewire:card>

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

<div class="card">
	<div class="card-header">
		<h2>Заголовок карточки</h2>
	</div>
	<div class="card-body">
		<p>Основное содержимое карточки.</p>
	</div>
	<div class="card-footer">
		<small>Подвал карточки</small>
	</div>
</div>

Передача данных в именованные слоты

В именованные слоты можно передавать данные, используя атрибут :name директивы @slot:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Alert extends Component
	{
		public $type = 'info';
		
		public function render()
		{
			return view('livewire.alert');
		}
	}
?>

<div class="alert alert-{{ $type }}">
	@slot('title', 'Заголовок по умолчанию')
		<strong>{{ $title }}</strong>
	@endslot
	{{ $slot }}
</div>

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

<livewire:alert :type="$type">
	<x-slot name="title">
		Внимание!
	</x-slot>
	Это сообщение для пользователя.
</livewire:alert>

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

<div class="alert alert-info">
	<strong>Внимание!</strong>
	Это сообщение для пользователя.
</div>

Совмещение именованных и стандартного слота

В компоненте можно одновременно использовать именованные слоты и стандартный слот, который получает всё содержимое, не обёрнутое в x-slot:

<div class="panel">
	@slot('header')
		Заголовок панели
	@endslot
	<div class="panel-content">
		{{ $slot }}
	</div>
	@slot('footer')
		Подвал панели
	@endslot
</div>

Пример использования:

<livewire:panel>
	<x-slot name="header">
		<h1>Основной заголовок</h1>
	</x-slot>
	<p>Основной контент панели.</p>
	<x-slot name="footer">
		<p>Дополнительная информация</p>
	</x-slot>
</livewire:panel>

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

<div class="panel">
	<h1>Основной заголовок</h1>
	<div class="panel-content">
		<p>Основной контент панели.</p>
	</div>
	<p>Дополнительная информация</p>
</div>

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

атрибут компонента slot,
который определяет стандартный слот
атрибут компонента attributes,
который позволяет получить все атрибуты элемента
атрибут компонента id,
который генерирует уникальный идентификатор
метод компонента render,
который возвращает представление компонента