Класс Component

Класс Component является основой каждого компонента Livewire. Все пользовательские компоненты должны наследовать этот класс. Он предоставляет базовую функциональность для управления состоянием, обработки событий и рендеринга представлений.

Структура компонента

Базовый компонент Livewire состоит из класса-наследника Component и соответствующего Blade-шаблона. Класс содержит публичные свойства для хранения состояния и методы для обработки действий пользователя.

Синтаксис

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

Пример

Создадим простой компонент для отображения и изменения числа:

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

<div>
	<h2>Counter</h2>
	<p>Current value: {{ $num }}</p>
	<button wire:click="inc">+</button>
	<button wire:click="dec">-</button>
</div>

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

<div>
	<h2>Counter</h2>
	<p>Current value: 5</p>
	<button>+</button>
	<button>-</button>
</div>

Пример

Добавим метод для увеличения числа и свойство для хранения сообщения:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Message extends Component
	{
		public $text = 'Hello World';
		public $count = 0;
		
		public function updateMessage()
		{
			$this->count++;
			$this->text = 'Updated ' . $this->count . ' times';
		}
		
		public function render()
		{
			return view('livewire.message');
		}
	}
?>

<div>
	<p>{{ $text }}</p>
	<button wire:click="updateMessage">
		Update
	</button>
</div>

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

<div>
	<p>Updated 1 times</p>
	<button>Update</button>
</div>

Пример

Компонент может содержать массив свойств и работать с коллекциями:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ListComponent extends Component
	{
		public $items = ['a', 'b', 'c'];
		public $newItem = '';
		
		public function addItem()
		{
			if ($this->newItem) {
				$this->items[] = $this->newItem;
				$this->newItem = '';
			}
		}
		
		public function removeItem($index)
		{
			unset($this->items[$index]);
			$this->items = array_values($this->items);
		}
		
		public function render()
		{
			return view('livewire.list');
		}
	}
?>

<div>
	<ul>
		@foreach ($items as $key => $item)
			<li>
				{{ $item }}
				<button wire:click="removeItem({{ $key }})">x</button>
			</li>
		@endforeach
	</ul>
	<input type="text" wire:model="newItem">
	<button wire:click="addItem">Add</button>
</div>

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

<div>
	<ul>
		<li>a <button>x</button></li>
		<li>b <button>x</button></li>
		<li>c <button>x</button></li>
	</ul>
	<input type="text">
	<button>Add</button>
</div>

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

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