Данные события в Livewire

Пусть в одном блоке человек выбирает подпись, а показать её нужно в другом месте страницы. Сосед может узнать, что кнопку нажали, но выбранных слов у него нет: доходит только факт нажатия.

В dispatch можно передать данные именованными аргументами. Метод с #[On] принимает их параметрами с теми же именами, и слушатель получает готовое значение.

Давайте сделаем страницу /picker с Picker и Board:

php artisan make:livewire Picker --class
php artisan make:livewire Board --class

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

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

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

<x-layout>
	<livewire:picker />
	<livewire:board />
</x-layout>

В Picker храним строку и шлём её с событием:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Picker extends Component
	{
		public $label = 'Selected item';
		
		public function choose()
		{
			$this->dispatch('chosen', label: $this->label);
		}
		
		public function render()
		{
			return view('livewire.picker');
		}
	}
?>

Кнопка запускает отправку:

<div>
	<button type="button" wire:click="choose">
		Choose
	</button>
</div>

Board примет текст и покажет его:

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

Принятый текст выведем так:

<div>
	{{ $text }}
</div>

Создайте компоненты Menu и Caption. Передайте в Caption текст, выбранный в Menu.