Работа с событиями в 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 для интерактивного взаимодействия компонентов в вашем приложении.