Метод dispatch компонента Livewire

Метод dispatch класса Component отправляет событие из текущего компонента Livewire. Событие может быть перехвачено другими компонентами на странице с помощью директивы wire:listen или глобального метода on. В первый параметр передаётся имя события, во второй - данные, которые будут переданы обработчикам.

Синтаксис

<?php
	$this->dispatch('event-name', $data);
?>

Пример

Отправим событие post-created из компонента после создания новой записи:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use App\Models\Post;
	
	class PostForm extends Component
	{
		public $title = '';
		public $content = '';
		
		public function save()
		{
			$post = Post::create([
				'title' => $this->title,
				'content' => $this->content,
			]);
			
			$this->dispatch('post-created', $post->id);
			
			$this->reset(['title', 'content']);
		}
		
		public function render()
		{
			return view('livewire.post-form');
		}
	}
?>

<form wire:submit="save">
	<input type="text" wire:model="title" placeholder="Title">
	<textarea wire:model="content" placeholder="Content"></textarea>
	<button type="submit">Create Post</button>
</form>

Пример

Перехватим отправленное событие в другом компоненте с помощью директивы wire:listen:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostNotifier extends Component
	{
		public $message = '';
		
		public function handlePostCreated($postId)
		{
			$this->message = "Post #{$postId} has been created!";
		}
		
		public function render()
		{
			return view('livewire.post-notifier');
		}
	}
?>

<div wire:listen="post-created" wire:listener="handlePostCreated($event.detail)">
	<p>{{ $message }}</p>
</div>

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

<div>
	<p>Post #5 has been created!</p>
</div>

Пример

Отправим событие с массивом данных и перехватим его глобально с помощью метода on:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\Livewire;
	
	class UserManager extends Component
	{
		public $users = ['user1', 'user2', 'user3'];
		
		public function deleteUser($name)
		{
			$this->users = array_filter($this->users, function($user) use ($name) {
				return $user !== $name;
			});
			
			$this->dispatch('user-deleted', [
				'name' => $name,
				'time' => now()->toDateTimeString(),
			]);
		}
		
		public function render()
		{
			return view('livewire.user-manager');
		}
	}
?>

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\Livewire;
	
	class UserLogger extends Component
	{
		public $logs = [];
		
		public function mount()
		{
			Livewire::on('user-deleted', function($data) {
				$this->logs[] = "User '{$data['name']}' deleted at {$data['time']}";
			});
		}
		
		public function render()
		{
			return view('livewire.user-logger');
		}
	}
?>

<div>
	<h3>Logs:</h3>
	<ul>
		@foreach($logs as $log)
			<li>{{ $log }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<h3>Logs:</h3>
	<ul>
		<li>User 'user2' deleted at 2024-01-15 14:30:25</li>
	</ul>
</div>

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

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