Метод dispatch

Метод dispatch класса Livewire предназначен для отправки событий из компонента Livewire. Он вешается на экземпляр компонента и вызывает указанное событие в родительских компонентах. В значение передаётся имя события и опциональные параметры. После отправки события, Livewire обновляет шаблоны компонентов, которые прослушивают это событие.

Синтаксис

<?php
	$this->dispatch('eventName', $param1, $param2);
?>

Пример

Давайте создадим компонент Child, который отправляет событие при клике на кнопку:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Child extends Component
	{
		public function sendEvent()
		{
			$this->dispatch('childClicked', 'Hello from child');
		}
		
		public function render()
		{
			return view('livewire.child');
		}
	}
?>

<button wire:click="sendEvent">
	Send Event
</button>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Parent extends Component
	{
		public $message = '';
		
		protected $listeners = ['childClicked' => 'handleChildClick'];
		
		public function handleChildClick($data)
		{
			$this->message = $data;
		}
		
		public function render()
		{
			return view('livewire.parent');
		}
	}
?>

<div>
	<livewire:child />
	<p>Message: {{ $message }}</p>
</div>

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

<div>
	<button>
		Send Event
	</button>
	<p>
		Message: Hello from child
	</p>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Child extends Component
	{
		public function sendEvent()
		{
			$this->dispatch('childClicked', 'Hello from child', 123, ['a', 'b', 'c']);
		}
		
		public function render()
		{
			return view('livewire.child');
		}
	}
?>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Parent extends Component
	{
		public $message = '';
		public $number = 0;
		public $array = [];
		
		protected $listeners = ['childClicked' => 'handleChildClick'];
		
		public function handleChildClick($data, $num, $arr)
		{
			$this->message = $data;
			$this->number = $num;
			$this->array = $arr;
		}
		
		public function render()
		{
			return view('livewire.parent');
		}
	}
?>

<div>
	<livewire:child />
	<p>Message: {{ $message }}</p>
	<p>Number: {{ $number }}</p>
	<p>Array: {{ implode(', ', $array) }}</p>
</div>

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

<div>
	<button>
		Send Event
	</button>
	<p>
		Message: Hello from child
	</p>
	<p>
		Number: 123
	</p>
	<p>
		Array: a, b, c
	</p>
</div>

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

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