Атрибут #[Reactive]

Атрибут #[Reactive] используется в компонентах Livewire для пометки публичных свойств, которые должны автоматически обновляться при изменении значения, переданного из родительского компонента. Это позволяет создавать реактивные связи между компонентами без необходимости ручного обновления.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesReactive;
	
	class ChildComponent extends Component
	{
		#[Reactive]
		public $prop;
	}
?>

Атрибут применяется к публичным свойствам компонента. При изменении свойства в родителе, Livewire автоматически синхронизирует его с дочерним компонентом.

Пример

Создадим родительский компонент с числовым счетчиком и передадим его значение в дочерний компонент:

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesReactive;
	
	class ChildCounter extends Component
	{
		#[Reactive]
		public $number;
		
		public function render()
		{
			return view('livewire.child-counter');
		}
	}
?>

<div>
	<button wire:click="increment">
		Increment
	</button>
	<span>
		Parent: {{ $count }}
	</span>
	<livewire:child-counter :number="$count" />
</div>

<div>
	<span>
		Child: {{ $number }}
	</span>
</div>

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

<button>
	Increment
</button>
<span>
	Parent: 5
</span>
<div>
	<span>
		Child: 5
	</span>
</div>

Пример

Передадим в дочерний компонент строковое значение и обновим его через родительский компонент:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ParentText extends Component
	{
		public $text = 'Hello';
		
		public function changeText()
		{
			$this->text = 'World';
		}
		
		public function render()
		{
			return view('livewire.parent-text');
		}
	}
?>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesReactive;
	
	class ChildText extends Component
	{
		#[Reactive]
		public $message;
		
		public function render()
		{
			return view('livewire.child-text');
		}
	}
?>

<div>
	<button wire:click="changeText">
		Change Text
	</button>
	<livewire:child-text :message="$text" />
</div>

<div>
	<span>
		Message: {{ $message }}
	</span>
</div>

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

<button>
	Change Text
</button>
<div>
	<span>
		Message: World
	</span>
</div>

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

атрибут #[Computed],
который создает вычисляемые свойства
атрибут #[Url],
который связывает свойство с параметром URL
атрибут #[Session],
который сохраняет свойство в сессии
атрибут #[Modelable],
который позволяет синхронизировать свойство с моделью