Метод dispatchSelf

Метод dispatchSelf класса Component предназначен для отправки события только текущему компоненту Livewire. В отличие от метода dispatch, который отправляет событие всем компонентам на странице, dispatchSelf отправляет событие исключительно тому компоненту, из которого был вызван. В метод первым параметром передаётся строка с названием события, вторым - массив с дополнительными данными (необязательно).

Синтаксис

<?php
	$this->dispatchSelf('eventName', ['data' => 'value']);
?>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function handleIncrement($data)
		{
			$this->num += $data['step'];
		}
		
		public function increment()
		{
			$this->dispatchSelf('increment-event', ['step' => 5]);
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<button wire:click="increment">
		Increment
	</button>
	<span>{{ $num }}</span>
</div>

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

<div>
	<button>
		Increment
	</button>
	<span>5</span>
</div>

Пример

Давайте рассмотрим отличие метода dispatchSelf от метода dispatch. Создадим два компонента на одной странице и отправим событие из первого:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ParentComponent extends Component
	{
		public function sendEvent()
		{
			$this->dispatchSelf('test-event', ['message' => 'hello']);
		}
		
		public function render()
		{
			return view('livewire.parent-component');
		}
	}
?>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ChildComponent extends Component
	{
		public $text = 'waiting';
		
		public function handleEvent($data)
		{
			$this->text = $data['message'];
		}
		
		public function render()
		{
			return view('livewire.child-component');
		}
	}
?>

<div>
	<button wire:click="sendEvent">
		Send event
	</button>
	<livewire:child-component />
</div>

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

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

<div>
	<button>
		Send event
	</button>
	<div>
		waiting
	</div>
</div>

Как видим, дочерний компонент не получил событие, потому что dispatchSelf отправляет событие только текущему компоненту ParentComponent.

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

метод dispatch,
который отправляет событие всем компонентам на странице
метод dispatchTo,
который отправляет событие конкретному компоненту по имени
свойство listeners,
которое определяет методы для обработки событий в компоненте
метод Livewire::on,
который подписывается на события из JavaScript