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

Давайте теперь возьмём карточку. Она на странице выглядит одинаково, а наполняют её снаружи: сверху заголовок, ниже основной текст. Если отдать рамке один общий кусок разметки, заголовок некуда поставить отдельно. Он приедет туда же, куда и абзац.

Именованный слот передают тегом livewire:slot с атрибутом name. В шаблоне ребёнка его выводят как $slots['heading'], а обычное содержимое между тегами по-прежнему идёт в $slot.

Давайте сделаем страницу /card с компонентом Card:

php artisan make:livewire Card --class

Давайте добавим маршрут:

<?php
	Route::get('/card', function () {
		return view('card');
	});
?>

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

<x-layout>
	<livewire:card>
		<livewire:slot name="heading">
			<h3>Card title</h3>
		</livewire:slot>
		<p>Card body text.</p>
	</livewire:card>
</x-layout>

Класс Card:

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

Давайте выведем оба слота в шаблоне компонента:

<div>
	<div>
		{{ $slots['heading'] }}
	</div>
	<div>
		{{ $slot }}
	</div>
</div>

Создайте компонент Article. Заголовок передайте отдельно от основного текста.