Events

Livewire components can communicate with each other through a global event system. As long as two Livewire components are living on the same page, they can communicate using events and listeners.

Firing Events

There are multiple ways to fire events from Livewire components.

Method A: From The Template

This method is twice as fast as Method B, so it is the preferred usage.

<button wire:click="$emit('showModal')">

Method B: From The Component

$this->emit('showModal');

Method C: From JavaScript

<script>
    window.livewire.emit('showModal')
</script>

Listening for events in PHP

Event listeners are registered in the $listeners property of your Livewire components.

use Livewire\Component;

class Modal extends Component
{
    public $isOpen = false;

    protected $listeners = ['showModal' => 'open'];

    public function open()
    {
        $this->isOpen = true;
    }

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

Now when any other component on the page emits a showModal event, this component will pick it up and fire the open method on itself.

You can also send parameters through the event bus.
$this->emit('showModal', 'My custom message for the modal');
use Livewire\Component;

class Modal extends Component
{
    public $message = null;
    public $isOpen = false;

    protected $listeners = ['showModal' => 'open'];

    public function open($message)
    {
        $this->isOpen = true;
        $this->message = $message; // Will be 'My custom message for the modal' 
    }

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

Listening for events in JavaScript

Livewire allows you to register event listeners in JavaScript like so:

<script>
window.livewire.on('foo', param => {
    alert('The foo event was called with the param: ' + param);
})
</script>
This feature is actually incredibly powerful. It provides a bridge between Livewire and other JS inside your app. For example, if you had a JavaScript function to show a toaster (popup) inside your app to show notification messages, you could trigger them from inside your Livewire component with this feature.

Listening for Laravel Echo events

Livewire pairs nicely with Laravel Echo to provide real-time functionality on your web-pages using WebSockets.

This feature assumes you have installed Laravel Echo and the `window.Echo` object is globally available. For more info on this, check out the docs.

Consider the following Laravel Event:

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

    public function broadcastOn()
    {
        return new Channel('orders');
    }
}

Let's say you fire this event with Laravel's broadcasting system like this:

event(new OrderShipped);

Normally, you would listen for this event in Laravel Echo like so:

Echo.channel('orders')
        .listen('OrderShipped', (e) => {
            console.log(e.order.name);
        });

With Livewire however, all you have to do is register it in your $listeners property, with some special syntax to designate it's from Echo.

use Livewire\Component;

class OrderTracker extends Component
{
    public $showNewOrderNotication = false;

    // Special Syntax: ['echo:{channel},{event}' => '{method}']
    protected $listeners = ['echo:orders,OrderShipped' => 'notifyNewOrder'];

    public function notifyNewOrder()
    {
        $this->showNewOrderNotification = true;
    }

    public function render()
    {
        return view('livewire.order-tracker');
    }
}

Now, Livewire will intercept the received event from Pusher, and act accordingly.

← Previous Topic

Lifecycle Hooks

Next Topic →

Validation