Публичное свойство

Публичное свойство Livewire - это атрибут класса компонента, объявленный с модификатором public. Такие свойства доступны в Blade-шаблоне через фигурные скобки {{ $prop }} и автоматически отслеживаются Livewire. При изменении публичного свойства на сервере (например, в методе) компонент перерендеривается, и новое значение отображается на странице. Публичные свойства могут быть любого типа: строки, числа, массивы, объекты, коллекции. Важно: для хранения больших данных (например, всего Eloquent-модели) используйте protected свойства, чтобы избежать проблем с производительностью.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ComponentName extends Component
	{
		public $propertyName = 'default value';
		
		public function render()
		{
			return view('livewire.component-name');
		}
	}
?>

Пример

Объявим публичное свойство $num со значением 0 и метод inc, который увеличивает его на 1:

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

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

После нажатия на кнопку свойство $num увеличивается, и шаблон обновляется автоматически:

<button>
	+
</button>
<span>5</span>

Пример

Публичные свойства могут хранить массивы. Добавим метод, который добавляет элемент в массив $arr:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ListComponent extends Component
	{
		public $arr = ['a', 'b', 'c'];
		
		public function add()
		{
			$this->arr[] = 'x';
		}
		
		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<button wire:click="add">
	add
</button>
<ul>
	@foreach ($arr as $item)
		<li>{{ $item }}</li>
	@endforeach
</ul>

При каждом клике массив пополняется новым элементом:

['a', 'b', 'c', 'x', 'x']

Пример

Публичное свойство может быть строкой. Введём текст в поле и отобразим его:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TextComponent extends Component
	{
		public $text = '';
		
		public function render()
		{
			return view('livewire.text-component');
		}
	}
?>

<input type="text" wire:model="text">
<p>{{ $text }}</p>

При вводе в поле свойство $text обновляется, и абзац показывает введённый текст:

<input type="text">
<p>abcde</p>

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

защищённое свойство protected,
которое не синхронизируется с клиентом
вычисляемое свойство computed,
которое вычисляется при обращении
директиву render,
которая возвращает шаблон компонента
директиву передача свойств,
которая позволяет передавать данные в дочерние компоненты