Событие одному компоненту в Livewire

Давайте разберём такой случай. На странице два блока реагируют на одно и то же сообщение, а кнопка должна задеть только один. Второй пусть останется как был. Если сообщить всем сразу, обновятся оба, хотя нужен был один.

К вызову dispatch можно добавить вызов to. Тогда событие получит только компонент указанного класса на этой странице, остальные слушатели с тем же именем его не увидят.

Давайте соберём страницу /sender с Sender, Board и Side:

php artisan make:livewire Sender --class
php artisan make:livewire Board --class
php artisan make:livewire Side --class

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

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

Страница вставит все три компонента:

<x-layout>
	<livewire:sender />
	<livewire:board />
	<livewire:side />
</x-layout>

Board и Side хранят надпись и слушают одно событие:

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\On;
	use Livewire\Component;
	
	class Board extends Component
	{
		public $line = 'Board idle';
		
		#[On('alert')]
		public function react()
		{
			$this->line = 'Board updated';
		}
		
		public function render()
		{
			return view('livewire.board');
		}
	}
?>

Надпись на странице:

<div>
	{{ $line }}
</div>

Второй слушатель устроен так же:

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\On;
	use Livewire\Component;
	
	class Side extends Component
	{
		public $line = 'Side idle';
		
		#[On('alert')]
		public function react()
		{
			$this->line = 'Side updated';
		}
		
		public function render()
		{
			return view('livewire.side');
		}
	}
?>

Его шаблон:

<div>
	{{ $line }}
</div>

Sender по кнопке шлёт событие только в Board:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Sender extends Component
	{
		public function fire()
		{
			$this->dispatch('alert')->to(component: Board::class);
		}
		
		public function render()
		{
			return view('livewire.sender');
		}
	}
?>

Кнопка отправителя:

<div>
	<button type="button" wire:click="fire">
		Fire
	</button>
</div>

Создайте компоненты Remote, Screen и Speaker. Сообщение с Remote должен получить только Screen.