Слот в Livewire

Пусть одна и та же рамка нужна на разных страницах: отступы, фон, обводка. Текст внутри каждый раз другой. Если зашить его в шаблон рамки, для каждой страницы приходится копировать весь компонент и менять в копии только середину.

Между открывающим и закрывающим тегами livewire можно положить разметку. В шаблоне ребёнка её выводят через $slot. Содержимое слота считается там, где компонент вызвали, а не внутри класса рамки.

Давайте сделаем страницу /frame с компонентом Frame. Создадим его командой:

php artisan make:livewire Frame --class

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

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

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

<x-layout>
	<livewire:frame>
		<p>Text inside the frame.</p>
	</livewire:frame>
</x-layout>

Класс Frame отдаёт шаблон:

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

Давайте нарисуем рамку и выведем слот внутри неё:

<div style="border: 1px solid #333; padding: 1rem;">
	{{ $slot }}
</div>

Создайте компонент Window. На странице положите внутрь него свой абзац.