- Опубликовано: 23 апр 2025
- 768
Работа с событиями в Livewire
В Livewire предусмотрена мощная система событий, позволяющая взаимодействовать между компонентами страницы. Поскольку под капотом используются обычные браузерные события, вы можете легко связывать компоненты Livewire, Alpine.js и даже чистый JavaScript.
Генерация событий
Чтобы отправить событие из компонента Livewire, используйте метод dispatch(), передавая название события и, при необходимости, дополнительные данные:
use Livewire\Component;
class CreatePost extends Component
{
public function save()
{
// ваш код сохранения...
$this->dispatch('post-created');
}
}
Можно передавать дополнительные данные вторым параметром:
$this->dispatch('post-created', title: $post->title);
Прослушивание событий
Для того, чтобы прослушивать событие, используйте атрибут #[On] над методом вашего компонента:
use Livewire\Component;
use Livewire\Attributes\On;
class Dashboard extends Component
{
#[On('post-created')]
public function updatePostList($title)
{
// обновите список постов...
}
}
Метод updatePostList будет вызван, когда произойдёт событие post-created.
Динамические названия событий
Вы можете использовать динамические имена событий для ограниченного воздействия события конкретной моделью:
$this->dispatch("post-updated.{$post->id}");
И слушать это событие так:
#[On('post-updated.{post.id}')]
public function refreshPost()
{
// Обновите конкретный пост...
}
Прослушивание событий от дочерних компонентов
В Blade-шаблоне можно указать прослушивание событий от конкретного дочернего компонента:
<livewire:edit-post @saved="$refresh">
Или вызвать конкретный метод:
<livewire:edit-post @saved="close">
С передачей данных:
<livewire:edit-post @saved="close($event.detail.postId)">
Взаимодействие с JavaScript
Livewire позволяет работать с событиями через JavaScript напрямую в компонентах:
@script
<script>
$wire.on('post-created', () => {
// JavaScript-логика...
});
</script>
@endscript
Отправка события через JS:
@script
<script>
$wire.dispatch('post-created', { refreshPosts: true });
</script>
@endscript
Доступ к данным события в JS:
$wire.on('post-created', (event) => {
let refreshPosts = event.detail.refreshPosts;
// ...
});
Глобальные JS-события
Прослушивать события глобально можно через Livewire.on:
document.addEventListener('livewire:init', () => {
Livewire.on('post-created', (event) => {
// ...
});
});
Использование с Alpine.js
Прослушивание событий Livewire в Alpine.js:
<div x-on:post-created="..."></div>
Глобально:
<div x-on:post-created.window="..."></div>
Отправка события из Alpine.js:
<button @click="$dispatch('post-created', { title: 'Post Title' })">Создать пост</button>
Напрямую без событий
Если необходимо вызвать родительский метод из дочернего компонента без событий:
<button wire:click="$parent.showCreatePostForm()">Создать пост</button>
Направленное отправление событий
Отправить событие непосредственно другому компоненту:
$this->dispatch('post-created')->to(Dashboard::class);
Событие самому себе:
$this->dispatch('post-created')->self();
Из Blade-шаблона:
<button wire:click="$dispatch('show-post-modal', { id: {{ $post->id }} })">Редактировать</button>
Или направленное событие:
<button wire:click="$dispatchTo('posts', 'show-post-modal', { id: {{ $post->id }} })">Редактировать</button>
Тестирование событий
Тестирование отправки события:
Livewire::test(CreatePost::class)
->call('save')
->assertDispatched('post-created');
Тестирование прослушивания события:
Livewire::test(Dashboard::class)
->assertSee('Posts created: 0')
->dispatch('post-created')
->assertSee('Posts created: 1');
Работа с Laravel Echo
Использование реального времени с Laravel Echo:
#[On('echo:orders,OrderShipped')]
public function notifyNewOrder()
{
$this->showNewOrderNotification = true;
}
С динамическими каналами:
public function getListeners()
{
return [
"echo:orders.{$this->order->id},OrderShipped" => 'notifyShipped',
];
}
Используя приватные и присутствующие каналы:
"echo-private:orders,OrderShipped" => 'notifyNewOrder',
"echo-presence:orders,here" => 'notifyNewOrder',
Теперь вы знаете, как эффективно использовать систему событий в Livewire для интерактивного взаимодействия компонентов в вашем приложении.
Была статья полезной:
