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

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

Method B: From The Component

$this->emit('postAdded');

Method C: From Global JavaScript

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

Event Listeners

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

Listeners are a key->value pair where the key is the event to listen for, and the value is the method to call on the component.

use Livewire\Component;

class ShowPosts extends Component
{
    public $addedMessageVisible = false;

    protected $listeners = ['postAdded' => 'showPostAddedMessage'];

    public function showPostAddedMessage()
    {
        $this->addedMessageVisible = true;
    }

    public function render()
    {
        return view('livewire.show-posts');
    }
}

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

If you need to name event listeners dynamically, you can substitute the $listeners property for the getListeners() protected method on the component:

use Livewire\Component;

class ShowPosts extends Component
{
    public $addedMessageVisible = false;

    protected function getListeners()
    {
        return ['postAdded' => 'showPostAddedMessage'];
    }

    ...
}

Passing Parameters

You can also send parameters with an event emission.

$this->emit('postAdded', $post->id);

use Livewire\Component;

class ShowPosts extends Component
{
    public $addedMessageVisible = false;
    public $addedPost;

    protected $listeners = ['postAdded'];

    public function postAdded($postId)
    {
        $this->addedMessageVisible = true;
        $this->addedPost = Post::find($postId);
    }

    public function render()
    {
        return view('livewire.show-posts');
    }
}

Scoping Events To Parent Listeners

When dealing with nested components, sometimes you may only want to emit events to parents and not children or sibling components.

In these cases, can use the emitUp feature:

<button wire:click="$emitUp('postAdded')">

$this->emitUp('postAdded');

Listening for events in JavaScript

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

<script>
window.livewire.on('postAdded', postId => {
    alert('A post was added with the id of: ' + postId);
})
</script>

Listening for Laravel Echo events

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

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.