On

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

基本用法

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

<?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', "新帖子已创建：{$title}");
    }
};

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

分发事件

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

<?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')] 装饰的方法。

向监听器传递数据

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

// 使用多个参数分发
$this->dispatch('post-updated', id: $post->id, title: $post->title);

// 监听并接收参数
#[On('post-updated')]
public function handlePostUpdate($id, $title)
{
    // 使用 $id 和 $title...
}

动态事件名称

您可以在事件名称中使用组件属性进行范围监听：

<?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 事件，忽略其他帖子的更新。

多个事件监听器

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

#[On('post-created')]
#[On('post-updated')]
#[On('post-deleted')]
public function refreshStats()
{
    // 当任何帖子更改时刷新统计信息
}

监听浏览器事件

您还可以监听从 JavaScript 分发的浏览器事件：

#[On('user-logged-in')]
public function handleUserLogin()
{
    // 处理登录...
}

// 从 JavaScript
window.dispatchEvent(new CustomEvent('user-logged-in'));

替代方法：在模板中监听

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

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

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

您还可以调用特定方法：

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

何时使用

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

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

示例：实时通知

以下是监听新通知的通知铃铛的实际示例：

<?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;
    }
};
?>

<button class="relative">
    <svg><!-- 铃铛图标 --></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>

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

// 从应用程序的任何地方
$this->dispatch('notification-sent');

了解更多

有关事件、向特定组件分发以及 Laravel Echo 集成的更多信息，请参阅事件文档。