Метод dispatchTo

Метод dispatchTo класса Component предназначен для отправки событий конкретному компоненту из другого компонента. Он принимает имя компонента-получателя, имя события и данные. Этот метод полезен когда нужно взаимодействовать между компонентами без использования глобальных событий.

Синтаксис

Метод вызывается внутри компонента-отправителя.

<?php
	$this->dispatchTo('receiver-component', 'event-name', ['param' => $value]);
?>

Параметры

Метод принимает три параметра:

$componentName - имя компонента-получателя (строка)
$event - имя события (строка)
$params - дополнительные параметры события (массив, опционально)

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Sender extends Component
	{
		public function sendEvent()
		{
			$this->dispatchTo('receiver', 'message-sent', ['text' => 'Hello from sender']);
		}
		
		public function render()
		{
			return view('livewire.sender');
		}
	}
?>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Receiver extends Component
	{
		public $message = '';
		
		protected $listeners = ['message-sent' => 'handleMessage'];
		
		public function handleMessage($params)
		{
			$this->message = $params['text'];
		}
		
		public function render()
		{
			return view('livewire.receiver');
		}
	}
?>

<div>
	<button wire:click="sendEvent">
		Send Message
	</button>
</div>

<div>
	<p>
		Received: {{ $message }}
	</p>
</div>

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

<button>
	Send Message
</button>
<p>
	Received: Hello from sender
</p>

Пример

Давайте отправим несколько параметров в событие:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Sender extends Component
	{
		public function sendData()
		{
			$this->dispatchTo('receiver', 'data-updated', [
				'id' => 5,
				'name' => 'article',
				'status' => 'active'
			]);
		}
		
		public function render()
		{
			return view('livewire.sender');
		}
	}
?>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Receiver extends Component
	{
		public $data = [];
		
		protected $listeners = ['data-updated' => 'updateData'];
		
		public function updateData($params)
		{
			$this->data = $params;
		}
		
		public function render()
		{
			return view('livewire.receiver');
		}
	}
?>

<div>
	@if ($data)
		<p>
			ID: {{ $data['id'] }}
		</p>
		<p>
			Name: {{ $data['name'] }}
		</p>
		<p>
			Status: {{ $data['status'] }}
		</p>
	@endif
</div>

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

<p>
	ID: 5
</p>
<p>
	Name: article
</p>
<p>
	Status: active
</p>

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

метод dispatch,
который отправляет событие всем компонентам
метод dispatchSelf,
который отправляет событие только текущему компоненту
свойство listeners,
которое определяет обработчики событий
метод on,
который регистрирует обработчик события