Livewire.dispatch() в JS

Метод Livewire.dispatch в JavaScript используется для отправки глобальных событий в приложении Livewire. Он позволяет инициировать событие из клиентского кода, которое могут перехватывать другие компоненты или Alpine.js. В отличие от $wire.dispatch, этот метод работает на уровне глобального объекта Livewire и доступен в любом месте JavaScript-кода.

Синтаксис метода: Livewire.dispatch('eventName', params), где первый параметр - это строка с названием события, а второй (необязательный) - объект с данными для передачи слушателям.

Синтаксис

Livewire.dispatch('eventName', { key: 'value' })

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class EventReceiver extends Component
	{
		public $message = '';
		
		protected $listeners = ['globalEvent' => 'handleEvent'];
		
		public function handleEvent($data)
		{
			$this->message = $data['text'] ?? 'Default message';
		}
		
		public function render()
		{
			return view('livewire.event-receiver');
		}
	}
?>

<div>
	<div>
		Message: <span>{{ $message }}</span>
	</div>
</div>

Теперь отправим событие из JavaScript:

Livewire.dispatch('globalEvent', { text: 'Hello from JS' })

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

<div>
	<div>
		Message: <span>"Hello from JS"</span>
	</div>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class EventReceiver extends Component
	{
		public $user = '';
		public $action = '';
		
		protected $listeners = ['userAction' => 'handleAction'];
		
		public function handleAction($data)
		{
			$this->user = $data['user'] ?? 'Guest';
			$this->action = $data['action'] ?? 'undefined';
		}
		
		public function render()
		{
			return view('livewire.event-receiver');
		}
	}
?>

<div>
	<div>User: <span>{{ $user }}</span></div>
	<div>Action: <span>{{ $action }}</span></div>
</div>

Отправим событие из JavaScript:

Livewire.dispatch('userAction', { 
	user: 'John Doe', 
	action: 'login' 
})

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

<div>
	<div>User: <span>"John Doe"</span></div>
	<div>Action: <span>"login"</span></div>
</div>

Пример

Используем Livewire.dispatch в обработчике клика вместе с Alpine.js:

<div x-data>
	<button @click="Livewire.dispatch('itemSelected', { id: 5 })">
		Select item
	</button>
</div>

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class AlpineExample extends Component
	{
		public $selectedId = null;
		
		protected $listeners = ['itemSelected' => 'setSelected'];
		
		public function setSelected($data)
		{
			$this->selectedId = $data['id'] ?? 0;
		}
		
		public function render()
		{
			return view('livewire.alpine-example');
		}
	}
?>

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

<div>
	<button>
		Select item
	</button>
</div>

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

метод $wire,
который возвращает экземпляр компонента в JavaScript
метод $wire.call,
который вызывает метод компонента из JavaScript
метод $wire.on,
который подписывается на события в JavaScript
метод $wire.dispatch,
который отправляет событие из конкретного компонента