2.5. События

Livewire предлагает надёжную систему событий, которую можно использовать для взаимодействия между различными компонентами на странице. Поскольку в основе используются события браузера, система событий Livewire также позволяет взаимодействовать с компонентами Alpine или даже с обычным JavaScript.

Чтобы вызвать событие, вы можете использовать метод dispatch() из любого места внутри вашего компонента и прослушивать это событие в любом другом компоненте на странице.

#1. Отправка событий

Чтобы отправить событие из компонента Livewire, вы можете вызвать метод dispatch(), передав ему имя события и любые дополнительные данные, которые вы хотите передать вместе с событием.

Ниже приведён пример отправки события post-created из компонента CreatePost:

use Livewire\Component;
 
class CreatePost extends Component
{
    public function save()
    {
        // ...
 
        $this->dispatch('post-created'); 
    }
}

В этом примере, когда вызывается метод dispatch(), событие post-created будет отправлено, и каждый другой компонент на странице, прослушивающий это событие, получит уведомление.

Вы можете передать дополнительные данные вместе с событием, указав их в качестве второго параметра метода dispatch():

$this->dispatch('post-created', title: $post->title);

#2. Прослушивание событий

Чтобы прослушивать событие в компоненте Livewire, добавьте атрибут #[On] над методом, который должен быть вызван при отправке указанного события:

use Livewire\Component;
use Livewire\Attributes\On; 
 
class Dashboard extends Component
{
    #[On('post-created')] 
    public function updatePostList($title)
    {
        // ...
    }
}

Теперь, когда событие post-created отправляется из CreatePost, будет выполнен сетевой запрос, и будет вызван метод updatePostList().

Как видно, дополнительные данные, переданные с событием, будут переданы в метод в качестве первого аргумента.

#2.1. Прослушивание динамических имён событий

Иногда может потребоваться динамически генерировать имена событий для прослушивания во время выполнения, используя данные из вашего компонента.

Например, если вы хотите ограничить область действия прослушивателя события конкретной моделью Eloquent, вы можете добавить идентификатор модели к имени события при его отправке следующим образом:

use Livewire\Component;
 
class UpdatePost extends Component
{
    public function update()
    {
        // ...
 
        $this->dispatch("post-updated.{$post->id}"); 
    }
}

А затем прослушивать событие для этой конкретной модели:

use Livewire\Component;
use App\Models\Post;
use Livewire\Attributes\On; 
 
class ShowPost extends Component
{
    public Post $post;
 
    #[On('post-updated.{post.id}')] 
    public function refreshPost()
    {
        // ...
    }
}