Вложенный компонент в Livewire

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

Подпись можно оформить отдельным компонентом Livewire и вставить его внутрь родителя тегом livewire. У вложенного куска свой класс и свой шаблон, родитель остаётся про рамку блока, а не про каждую мелочь.

Давайте сделаем страницу панели на /panel. Сначала создадим компонент подписи, затем компонент панели. В корне проекта выполним команды:

php artisan make:livewire Badge --class
php artisan make:livewire Panel --class

Давайте добавим маршрут, который отдаёт страницу:

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

Давайте обернём компонент панели в x-layout на странице panel.blade.php:

<x-layout>
	<livewire:panel />
</x-layout>

Класс подписи пусть только отдаёт шаблон:

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

Давайте выведем текст подписи в шаблоне badge.blade.php:

<div>
	New
</div>

Класс панели тоже сводим к render:

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

Внутри panel.blade.php нарисуем рамку и вставим подпись тегом livewire:badge:

<div>
	<div>
		Panel body
	</div>
	<livewire:badge />
</div>

Создайте компонент Page и вложите в него компонент Mark с короткой подписью.