Полностью страничный компонент

Полностью страничный компонент (full-page component) в Livewire - это компонент, который обрабатывает весь HTTP-запрос и возвращает полноценную HTML-страницу, а не фрагмент. Такой компонент полностью заменяет традиционный контроллер и представление в Laravel. Он позволяет использовать всю мощь Livewire для построения интерактивных страниц.

Особенность полностью страничного компонента заключается в том, что он не требует дополнительного родительского шаблона или лейаута. При обращении к маршруту, связанному с таким компонентом, Livewire автоматически рендерит его шаблон как полную страницу. При этом сохраняется весь функционал Livewire: реактивность, AJAX-запросы, валидация и другие возможности.

Создание полностью страничного компонента

Создадим компонент, который будет отображать страницу с приветствием. Для этого используем Artisan-команду с флагом --full-page:

php artisan make:livewire Welcome --full-page

Эта команда создаст класс компонента и шаблон. В классе компонента определим свойство $message и метод для его обновления:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Welcome extends Component
	{
		public $message = 'Welcome to Livewire!';
		
		public function updateMessage()
		{
			$this->message = 'Hello from full-page component!';
		}
		
		public function render()
		{
			return view('livewire.welcome');
		}
	}
?>

<!DOCTYPE html>
<html>
<head>
	<title>Welcome</title>
	@livewireStyles
</head>
<body>
	<div>
		<h1>{{ $message }}</h1>
		<button wire:click="updateMessage">
			Update
		</button>
	</div>
	@livewireScripts
</body>
</html>

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

<h1>Hello from full-page component!</h1>
<button>Update</button>

Регистрация маршрута

Чтобы компонент стал доступен по определённому URL, зарегистрируем маршрут с помощью метода Route::livewire:

<?php
	use App\Livewire\Welcome;
	use Illuminate\Support\Facades\Route;
	
	Route::livewire('/welcome', Welcome::class);
?>

Теперь при переходе по адресу /welcome будет отображаться наша полноценная страница, управляемая Livewire.

Передача параметров в маршруте

Полностью страничный компонент может принимать параметры из сегментов URL. Добавим свойство $userId, которое будет заполняться из маршрута:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Welcome extends Component
	{
		public $userId;
		public $message = 'Welcome!';
		
		public function mount($userId)
		{
			$this->userId = $userId;
			$this->message = "Welcome, user #$userId!";
		}
		
		public function render()
		{
			return view('livewire.welcome');
		}
	}
?>

<?php
	use App\Livewire\Welcome;
	use Illuminate\Support\Facades\Route;
	
	Route::livewire('/user/{userId}', Welcome::class);
?>

<!DOCTYPE html>
<html>
<head>
	<title>User Profile</title>
	@livewireStyles
</head>
<body>
	<div>
		<h1>{{ $message }}</h1>
		<p>User ID: {{ $userId }}</p>
	</div>
	@livewireScripts
</body>
</html>

Результат выполнения кода при переходе по адресу /‌user/42:

<h1>Welcome, user #42!</h1>
<p>User ID: 42</p>

Использование лейаута

Полностью страничный компонент может использовать лейаут для единообразного оформления страниц. Для этого в методе render нужно указать имя лейаута:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Welcome extends Component
	{
		public $message = 'Welcome to Livewire!';
		
		public function render()
		{
			return view('livewire.welcome')
				->layout('layouts.app');
		}
	}
?>

<!DOCTYPE html>
<html>
<head>
	<title>@yield('title', 'App')</title>
	@livewireStyles
</head>
<body>
	<header>
		<h1>My Site</h1>
	</header>
	<main>
		{{ $slot }}
	</main>
	<footer>
		<p>Footer</p>
	</footer>
	@livewireScripts
</body>
</html>

<div>
	<h2>{{ $message }}</h2>
	<button wire:click="updateMessage">
		Update
	</button>
</div>

Результат выполнения кода будет представлять собой страницу с шапкой, основным контентом и подвалом. При этом компонент Livewire сохранит всю интерактивность.

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

метод render,
который возвращает шаблон компонента
функцию Route::livewire,
которая регистрирует маршрут для компонента
раздел именование компонентов,
который определяет правила именования классов и шаблонов
раздел передача параметров,
которая описывает работу с параметрами в компонентах