Laravel11+Livewire3跨组件事件分发失效问题求助

先排查基础问题：Tickets组件是否在当前页面渲染 #

Livewire的->to(Tickets::class)只会把事件发给当前页面已挂载的Tickets组件实例，如果你的页面里根本没渲染这个组件（比如在其他路由页面、或被条件判断隐藏），事件肯定收不到。

先确认视图中是否添加了该组件：

<livewire:tickets />

给Tickets组件添加正确的事件监听 #

Livewire 3推荐用注解方式监听组件内事件，直接在Tickets组件中编写：

<?php

namespace App\Livewire;

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

class Tickets extends Component
{
    #[On('ticketCreated')]
    public function handleNewTicket()
    {
        // 触发前端通知的事件
        $this->dispatch('showNewTicketNotification', msg: '有新工单生成了！');
    }

    public function render()
    {
        return view('livewire.tickets');
    }
}

如果不习惯注解，也可以在mount方法中注册监听：

public function mount()
{
    $this->listen('ticketCreated', function () {
        $this->dispatch('showNewTicketNotification', msg: '有新工单生成了！');
    });
}

前端实现通知弹窗 #

在Tickets组件的blade视图中，添加前端事件监听，可选择原生浏览器通知或自定义弹窗：

<div>
    <!-- 你的Tickets组件内容 -->
</div>

<script>
document.addEventListener('livewire:initialized', () => {
    Livewire.on('showNewTicketNotification', (data) => {
        // 原生浏览器通知（需先获取权限）
        if (Notification.permission === 'granted') {
            new Notification('工单提醒', { body: data.msg });
        } else if (Notification.permission !== 'denied') {
            Notification.requestPermission().then(perm => {
                if (perm === 'granted') {
                    new Notification('工单提醒', { body: data.msg });
                }
            });
        }

        // 嫌原生麻烦直接用alert也可以
        // alert(data.msg);
    });
});
</script>

若组件不在同一页面：使用全局广播 #

如果Totem和Tickets组件不在同一个页面，组件间直接分发事件无效，需用Laravel广播系统（比如Pusher或Redis）：

1. 在.env中配置广播驱动：

BROADCAST_DRIVER=pusher

2. 创建全局事件类：

php artisan make:event TicketCreated

修改事件类使其支持广播：

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class TicketCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function broadcastOn(): array
    {
        // 公共频道，所有在线用户均可接收
        return [new Channel('tickets')];
    }
}

3. 在Totem的generate方法中触发全局事件：

public function generate($queueId, $priority = false)
{
    // ... 原有业务代码

    // 触发全局广播事件
    event(new \App\Events\TicketCreated());

    // ... 原有业务代码
}

4. 在Tickets组件中订阅频道并监听事件：

public function mount()
{
    $this->listen('echo:tickets,TicketCreated', function () {
        $this->dispatch('showNewTicketNotification', msg: '有新工单生成了！');
    });
}

内容的提问来源于stack exchange，提问作者Henrique Postalli