Многофайловый компонент

Многофайловый компонент в Livewire представляет собой способ организации кода, при котором логика компонента и его представление разделены по разным файлам. Это стандартный подход в Livewire: класс компонента располагается в app/Livewire, а Blade-шаблон - в resources/views/livewire. Такая структура облегчает поддержку и масштабирование проекта.

Структура многофайлового компонента

Многофайловый компонент состоит из двух основных файлов: PHP-класса компонента и Blade-шаблона для его отображения. Названия файлов должны совпадать. Например, для компонента Counter нужны файлы app/Livewire/Counter.php и resources/views/livewire/counter.blade.php.

Создание компонента

Создать многофайловый компонент можно с помощью Artisan-команды:

php artisan make:livewire Counter

Эта команда автоматически создаст оба файла с базовой структурой.

Пример компонента

Создадим компонент счетчика. Класс компонента в файле app/Livewire/Counter.php:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function inc()
		{
			$this->num++;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

Шаблон компонента в файле resources/views/livewire/counter.blade.php:

<div>
	<button wire:click="inc">+</button>
	<span>{{ $num }}</span>
</div>

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

<div>
	<button>+</button>
	<span>1</span>
</div>

Передача данных в шаблон

В методе render можно передать дополнительные данные в шаблон вторым параметром через массив:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Post extends Component
	{
		public $title = 'Article';
		public $body = 'Text';
		
		public function render()
		{
			return view('livewire.post', [
				'fullTitle' => $this->title . ' - site',
			]);
		}
	}
?>

<div>
	<h1>{{ $fullTitle }}</h1>
	<p>{{ $body }}</p>
</div>

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

<div>
	<h1>Article - site</h1>
	<p>Text</p>
</div>

Использование публичных свойств

Все публичные свойства класса автоматически передаются в шаблон и доступны как переменные в Blade:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class User extends Component
	{
		public $name = 'John';
		public $age = 25;
		
		public function render()
		{
			return view('livewire.user');
		}
	}
?>

<div>
	<p>Name: {{ $name }}</p>
	<p>Age: {{ $age }}</p>
</div>

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

<div>
	<p>Name: John</p>
	<p>Age: 25</p>
</div>

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

метод render,
который возвращает шаблон компонента
класс Component,
от которого наследуются все компоненты
однофайловый компонент SFC,
который объединяет логику и представление в одном файле
функцию Route::livewire,
которая регистрирует маршрут для full-page компонента