Livewire 中文文档

主题

#[On] ​

#[On] 属性允许组件监听事件，并在这些事件被派发时执行方法。

基本用法 ​

将 #[On] 属性应用于任何应在事件派发时调用的方法：

php
<?php // resources/views/components/⚡dashboard.blade.php

use Livewire\Attributes\On;
use Livewire\Component;

new class extends Component {
    #[On('post-created')] // [tl! highlight]
    public function updatePostList($title)
    {
        session()->flash('status', "New post created: {$title}");
    }
};

当另一个组件派发 post-created 事件时，updatePostList() 方法将自动被调用。

派发事件 ​

要派发触发监听器的事件，使用 dispatch() 方法：

php
<?php // resources/views/components/post/⚡create.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public $title = '';

    public function save()
    {
        $post = Post::create(['title' => $this->title]);

        $this->dispatch('post-created', title: $post->title); // [tl! highlight]

        return redirect('/posts');
    }
};

post-created 事件将触发任何使用 #[On('post-created')] 装饰的方法。

向监听器传递数据 ​

事件可以将数据作为命名参数传递：

php
// Dispatching with multiple parameters
$this->dispatch('post-updated', id: $post->id, title: $post->title);
php
// Listening and receiving parameters
#[On('post-updated')]
public function handlePostUpdate($id, $title)
{
    // Use $id and $title...
}

动态事件名称 ​

你可以在事件名称中使用组件属性进行作用域监听：

php
<?php // resources/views/components/post/⚡show.blade.php

use Livewire\Attributes\On;
use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    #[On('post-updated.{post.id}')] // [tl! highlight]
    public function refreshPost()
    {
        $this->post->refresh();
    }
};

如果 $post->id 是 3，这将只监听 post-updated.3 事件，忽略对其他文章的更新。

多个事件监听器 ​

单个方法可以监听多个事件：

php
#[On('post-created')]
#[On('post-updated')]
#[On('post-deleted')]
public function refreshStats()
{
    // Refresh statistics when any post changes
}

监听浏览器事件 ​

你还可以监听从 JavaScript 派发的浏览器事件：

php
#[On('user-logged-in')]
public function handleUserLogin()
{
    // Handle login...
}
javascript
// From JavaScript
window.dispatchEvent(new CustomEvent('user-logged-in'));

替代方案：在模板中监听 ​

除了使用属性，你还可以在 Blade 模板中直接监听子组件的事件：

blade
<livewire:post.edit @saved="$refresh" />

这监听来自 post.edit 子组件的 saved 事件，并在派发时刷新父组件。

你还可以调用特定方法：

blade
<livewire:post.edit @saved="handleSave($event.id)" />

何时使用 ​

在以下情况使用 #[On]：

  • 一个组件需要对另一个组件中的操作做出反应
  • 实现实时通知或更新
  • 构建通过事件通信的松耦合组件
  • 监听浏览器或 Laravel Echo 事件
  • 在外部更改发生时刷新数据

示例：实时通知 ​

这是一个监听新通知的通知铃铛的实际示例：

php
<?php // resources/views/components/⚡notification-bell.blade.php

use Livewire\Attributes\On;
use Livewire\Component;

new class extends Component {
    public $unreadCount = 0;

    public function mount()
    {
        $this->unreadCount = auth()->user()->unreadNotifications()->count();
    }

    #[On('notification-sent')] // [tl! highlight]
    public function incrementCount()
    {
        $this->unreadCount++;
    }

    #[On('notifications-read')] // [tl! highlight]
    public function resetCount()
    {
        $this->unreadCount = 0;
    }
};
blade
<button class="relative">
    <svg><!-- Bell icon --></svg>
    @if($unreadCount > 0)
        <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full px-2 py-1 text-xs">
            {{ $unreadCount }}
        </span>
    @endif
</button>

其他组件可以派发事件来更新通知计数：

php
// From anywhere in your app
$this->dispatch('notification-sent');

了解更多 ​

有关事件、派发到特定组件和 Laravel Echo 集成的更多信息，请参阅事件文档。

参考 ​

php
#[On(
    string $event,
)]
参数类型默认值描述
$eventstring必需要监听的事件名称