Реактивное свойство в Livewire

Давайте разберём такой случай. Внутри карточки поста сидит значок с заголовком. Родитель меняет заголовок кнопкой, а значок остаётся со старым текстом.

Атрибут Reactive вешают на свойство вложенного компонента: при смене значения у родителя Livewire снова передаёт его внутрь, и дочерний шаблон рисуется заново.

Давайте создадим компоненты PostCard и PostBadge:

php artisan make:livewire PostCard --class
php artisan make:livewire PostBadge --class

Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/card', function () {
		return view('posts-card');
	});
?>

<x-layout>
	<livewire:post-card />
</x-layout>

Давайте заведём реактивное поле во вложенном компоненте:

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\Reactive;
	use Livewire\Component;
	
	class PostBadge extends Component
	{
		#[Reactive]
		public $title;
		
		public function render()
		{
			return view('livewire.post-badge');
		}
	}
?>

Давайте опишем карточку с заголовком и кнопкой смены:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostCard extends Component
	{
		public $title = 'News';
		
		public function changeTitle()
		{
			$this->title = 'Photo';
		}
		
		public function render()
		{
			return view('livewire.post-card');
		}
	}
?>

Давайте выведем значок в шаблоне карточки:

<div>
	<button wire:click="changeTitle">
		Change
	</button>
	<livewire:post-badge :title="$title" />
</div>

Давайте покажем заголовок во вложенном шаблоне:

<div>
	{{ $title }}
</div>

Создайте компоненты EmployeeCard и EmployeeBadge. Когда карточка меняет имя, значок показывает новое.