Jump to another example:
Basics
Store
Composables
Events
Forms
Events
Events Showcase: Broadcast
Dispatch an event and let multiple components react without direct coupling.
How it works
One component dispatches an event, another component on the same page listens and reacts. This is useful for decoupled communication without tight coupling between components.
Publisher component
Sent: 0
This emits dispatch('demo-ping', payload).
Subscriber component
Received: 0
No events yet
Listens via $listeners['demo-ping'] = 'onPing'.
app/LiVue/EventPublisherDemo.php
public function sendPing(): void
{
$this->sent++;
$this->dispatch('demo-ping', [
'message' => "Ping #{$this->sent}",
'time' => now()->format('H:i:s'),
]);
}
app/LiVue/EventSubscriberDemo.php
protected array $listeners = [
'demo-ping' => 'onPing',
];
public function onPing(array $payload = []): void
{
$this->received++;
$this->lastMessage = (
$payload['message'] ?? 'Ping'
) . ' at ' . (
$payload['time'] ?? '--:--:--'
);
}