Livewire::on

Статический метод on класса Livewire регистрирует глобальный обработчик событий. Он принимает два параметра: имя события и колбэк-функцию, которая выполняется при возникновении этого события. Метод обычно вызывается в методе boot сервис-провайдера или в методе mount компонента.

Синтаксис

<?php
	use LivewireLivewire;
	
	Livewire::on('event-name', function ($param1, $param2) {
		// Логика обработки
	});
?>

Пример

Давайте создадим обработчик глобального события post-created, которое будет логировать сообщение при его вызове:

<?php
	namespace AppProviders;
	
	use IlluminateSupportServiceProvider;
	use LivewireLivewire;
	
	class AppServiceProvider extends ServiceProvider
	{
		public function boot()
		{
			Livewire::on('post-created', function ($postId, $postTitle) {
				logger("Post created: ID: $postId, Title: $postTitle");
			});
		}
	}
?>

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireLivewire;
	
	class PostCreator extends Component
	{
		public $title = '';
		
		public function createPost()
		{
			$postId = rand(1, 100);
			
			Livewire::dispatch('post-created', $postId, $this->title);
			
			$this->title = '';
		}
		
		public function render()
		{
			return view('livewire.post-creator');
		}
	}
?>

<div>
	<input type="text" wire:model="title" placeholder="Enter post title">
	<button wire:click="createPost">Create Post</button>
</div>

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

[2024-01-15 10:30:45] local.DEBUG: Post created: ID: 42, Title: My New Post

Пример с передачей параметров

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireLivewire;
	
	class UserHandler extends Component
	{
		public $message = '';
		
		public function mount()
		{
			Livewire::on('user-updated', function ($userId, $userName, $userEmail) {
				$this->message = "User $userName (ID: $userId) updated. Email: $userEmail";
			});
		}
		
		public function render()
		{
			return view('livewire.user-handler');
		}
	}
?>

<div>
	<div>{{ $message }}</div>
	<button wire:click="$dispatch('user-updated', [1, 'John Doe', 'john@example.com'])">
		Update User
	</button>
</div>

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

<div>
	<div>User John Doe (ID: 1) updated. Email: john@example.com</div>
	<button>Update User</button>
</div>

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

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