Livewire 3 全局JavaScript触发组件事件问题求助

Livewire 3 对全局事件触发的API做了调整，原Livewire 2中的Livewire.emit()不再适用，你可以通过以下两种方式实现全局触发事件：

方法一：使用Livewire.dispatch()（官方推荐的全局触发方式） #

将原代码中的Livewire.emit('register_lock', register_id)替换为：

Livewire.dispatch('register_lock', { register_id: register_id });

单参数场景可简化为：

Livewire.dispatch('register_lock', register_id);

修改后的完整代码：

window.register_lock = function(register_id) {
    swal({
        title: 'question',
        text: 'Rly?',
        icon: 'warning',
        buttons: true,
        dangerMode: true,
    }).then((confirmed) => {
        if (confirmed) {
            Livewire.dispatch('register_lock', { register_id: register_id });
        }
    });
};

方法二：广播事件到所有组件 #

如果需要确保所有监听该事件的组件都能收到，可以使用emitTo指定目标为所有组件（*通配符）：

Livewire.emitTo('*', 'register_lock', register_id);

服务端监听注意事项 #

确保你的服务端有对应的组件监听该事件，比如在根组件或任意需要处理逻辑的组件中添加监听：

// 示例组件类
namespace App\Http\Livewire;

use Livewire\Component;

class YourComponent extends Component
{
    protected $listeners = [
        'register_lock' => 'handleRegisterLock',
    ];

    public function handleRegisterLock($register_id)
    {
        // 这里编写你的服务端业务逻辑
    }

    public function render()
    {
        return view('livewire.your-component');
    }
}

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