Однофайловый компонент

Однофайловый компонент (Single-File Component, SFC) - это подход в Livewire, при котором PHP-класс компонента и его Blade-шаблон находятся в одном файле с расширением .blade.php. Такой формат упрощает организацию кода и удобен для небольших компонентов. В SFC-компоненте логика и представление расположены в одном месте, что облегчает их поддержку и перенос.

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

Однофайловый компонент содержит PHP-класс, который наследуется от LivewireComponent, и Blade-шаблон, который может быть определён через метод render с возвратом строки шаблона или через специальную секцию внутри файла.

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class UserProfile extends Component
	{
		public $name = 'John Doe';
		public $email = 'john@example.com';

		public function updateName($newName)
		{
			$this->name = $newName;
		}

		public function render()
		{
			return <<<'BLADE'
				<div>
					<h2>{{ $name }}</h2>
					<p>{{ $email }}</p>
					<button wire:click="updateName('Jane Doe')">
						Update Name
					</button>
				</div>
			BLADE;
		}
	}
?>

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

<div>
	<h2>John Doe</h2>
	<p>john@example.com</p>
	<button>
		Update Name
	</button>
</div>

Создание однофайлового компонента

Для создания однофайлового компонента используйте команду Artisan с флагом --inline:

php artisan make:livewire UserProfile --inline

После выполнения команды будет создан файл app/Livewire/UserProfile.php с встроенным шаблоном.

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

Давайте создадим однофайловый компонент, который отображает и изменяет число с помощью публичного свойства $count:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class Counter extends Component
	{
		public $count = 0;

		public function increment()
		{
			$this->count++;
		}

		public function render()
		{
			return <<<'BLADE'
				<div>
					<h3>Count: {{ $count }}</h3>
					<button wire:click="increment">
						Increment
					</button>
				</div>
			BLADE;
		}
	}
?>

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

<div>
	<h3>Count: 1</h3>
	<button>
		Increment
	</button>
</div>

Работа с массивами

Рассмотрим пример компонента, который выводит список элементов массива и добавляет новые значения:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class UserList extends Component
	{
		public $users = ['Alice', 'Bob', 'Charlie'];

		public function addUser($name)
		{
			$this->users[] = $name;
		}

		public function render()
		{
			return <<<'BLADE'
				<div>
					<ul>
						@foreach ($users as $user)
							<li>{{ $user }}</li>
						@endforeach
					</ul>
					<button wire:click="addUser('Dave')">
						Add User
					</button>
				</div>
			BLADE;
		}
	}
?>

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

<div>
	<ul>
		<li>Alice</li>
		<li>Bob</li>
		<li>Charlie</li>
	</ul>
	<button>
		Add User
	</button>
</div>

Пример с условиями

Давайте реализуем компонент, который показывает разное содержимое в зависимости от значения свойства:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class StatusDisplay extends Component
	{
		public $isActive = true;

		public function toggleStatus()
		{
			$this->isActive = !$this->isActive;
		}

		public function render()
		{
			return <<<'BLADE'
				<div>
					@if ($isActive)
						<span class="active">Status: Active</span>
					@else
						<span class="inactive">Status: Inactive</span>
					@endif
					<button wire:click="toggleStatus">
						Toggle
					</button>
				</div>
			BLADE;
		}
	}
?>

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

<div>
	<span class="active">Status: Active</span>
	<button>
		Toggle
	</button>
</div>

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

Передадим в метод компонента параметр для изменения свойства:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class PriceChanger extends Component
	{
		public $price = 100;

		public function changePrice($percent)
		{
			$this->price += $this->price * ($percent / 100);
		}

		public function render()
		{
			return <<<'BLADE'
				<div>
					<p>Price: {{ $price }}</p>
					<button wire:click="changePrice(10)">
						Increase by 10%
					</button>
					<button wire:click="changePrice(-10)">
						Decrease by 10%
					</button>
				</div>
			BLADE;
		}
	}
?>

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

<div>
	<p>Price: 110</p>
	<button>
		Increase by 10%
	</button>
	<button>
		Decrease by 10%
	</button>
</div>

Преимущества использования

Однофайловые компоненты упрощают разработку небольших и средних компонентов, уменьшают количество файлов в проекте и делают код более самодостаточным. Они особенно полезны для прототипирования и быстрой разработки.

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

класс Component,
от которого наследуются все компоненты Livewire
метод render,
который возвращает шаблон компонента
раздел многофайловые компоненты,
где логика и шаблон разделены
публичные свойства public-prop,
которые используются в SFC-компонентах