Поле slot класса Component

Поле slot в классе компонента Livewire позволяет определить именованный слот, который может быть заполнен контентом из родительского шаблона. Это дает возможность создавать гибкие компоненты с переиспользуемыми областями для вставки контента. Слоты могут содержать как простой текст, так и HTML-разметку или другие компоненты.

Синтаксис

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Alert extends Component
	{
		public $slot;
		
		public function render()
		{
			return view('livewire.alert');
		}
	}
?>

Пример

Давайте создадим компонент Alert с полем slot для вывода сообщения:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Alert extends Component
	{
		public $slot;
		
		public function render()
		{
			return view('livewire.alert');
		}
	}
?>

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

<livewire:alert>
	Это сообщение для пользователя
</livewire:alert>

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

<div class="alert">
	Это сообщение для пользователя
</div>

Пример

Использование слота с HTML-разметкой в компоненте Card:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Card extends Component
	{
		public $slot;
		public $title;
		
		public function render()
		{
			return view('livewire.card');
		}
	}
?>

<div class="card">
	<h3>{{ $title }}</h3>
	<div class="card-body">
		{{ $slot }}
	</div>
</div>

<livewire:card title="Заголовок карточки">
	<p>Это содержимое карточки</p>
	<p>Может содержать несколько абзацев</p>
</livewire:card>

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

<div class="card">
	<h3>Заголовок карточки</h3>
	<div class="card-body">
		<p>Это содержимое карточки</p>
		<p>Может содержать несколько абзацев</p>
	</div>
</div>

Пример

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

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class UserProfile extends Component
	{
		public $slot;
		public $userName;
		public $userRole;
		
		public function render()
		{
			$this->userName = 'John Doe';
			$this->userRole = 'Administrator';
			
			return view('livewire.user-profile');
		}
	}
?>

<div class="profile">
	<h2>{{ $userName }}</h2>
	<p>Роль: {{ $userRole }}</p>
	<div class="profile-content">
		{{ $slot }}
	</div>
</div>

<livewire:user-profile>
	<strong>Дополнительная информация:</strong>
	<ul>
		<li>Email: john@example.com</li>
		<li>Телефон: +123456789</li>
	</ul>
</livewire:user-profile>

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

<div class="profile">
	<h2>John Doe</h2>
	<p>Роль: Administrator</p>
	<div class="profile-content">
		<strong>Дополнительная информация:</strong>
		<ul>
			<li>Email: john@example.com</li>
			<li>Телефон: +123456789</li>
		</ul>
	</div>
</div>

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

метод render,
который возвращает шаблон компонента
директиву именованные слоты,
которая позволяет создавать множество слотов в одном компоненте
передачу свойств компонента,
которая позволяет передавать данные в дочерние компоненты
компонент Component,
который является базовым классом для всех Livewire компонентов