Review: Custom Events in Laravel Livewire from Parent to Child and Vice Versa

▶

One of the complications I see with Livewire, that is, a negative point if we compare it to Inertia or directly to Laravel or the implementation itself, is that I sometimes consider it very abstract, and there are many ways to do the same thing.

What do I mean by this? We often want to update sibling components, components that can't communicate directly, but the action of one should cause the other to update. However, this operation isn't possible directly, as they can't communicate with sibling components.

So, for me, that's a problem because, obviously, the page isn't consistent based on what we just did. That is, if we hit "add" the first time and reload the page, it's presented in one way, and when we reload (which is how it will remain), it's presented in a different way based on the logic we implemented. And that's the problem.

The Complexity of the Solution and the Multiple Options in Livewire

The solution, unfortunately, isn't that simple, and what I'm saying is that everything related to components in Livewire can be a bit abstract. Well, there could be many ways to do the same thing, and it may not be entirely clear what we need to do: reload the entire page with JavaScript, do it through Alpine, which also exists, communicate the component in some way, use keys to redraw the component or directly the property I'm going to talk about. What I'm saying is that there are many ways to do the same thing, and it's quite abstract and complicated to actually know what we need to do, which is a bit of what I want to talk about in the next two classes. Again, what we want to do is a bit trivial, but getting to it is a bit difficult, at least for me.

"Refresh" Property

So, what do I want to talk about with regard to refresh? Now that's clear, what we're trying to achieve is reload that component. To do this, we have a refresh property in Laravel Livewire, as we discussed earlier. The idea is that when changes occur in any of the sibling components, we notify the parent component, and it updates its state using the refresh property:

class General extends Component
{
  ***
   protected $listeners = ['stepEvent'];
   
   
class Person extends Component
{
   ***
   function submit()
   {
       ***
       $this->dispatch('stepEvent', 3);
   }

Alternatives and Communication between Components

One way to reload a component and thus its children is with the refresh property, another way is to use the key:

class Show extends Component
{
    ***
    public $key = 5;

    #[On('refreshComponent')]
    function refreshComponent()
    {
        $this->key = date('Y-m-d H:i:s');
        ***
    }
}

<div class="mycard-primary mb-5 block max-w-96">
   <div class="mycard-body">
       <h3 class="text-center text-3xl mb-4">Add this item</h3>
       @livewire('shop.cart', key($key), ['post' => $post, 'type' => 'add'])
   </div>
</div>

In which, it forces the redrawing of the child components.

Conclusion

So, to wrap things up, as I said, the problem is that in both cases, the component and the components are siblings; their operations are independent of each other. So, we can communicate this through events, events that can happen from the child to the parent, as shown above, and vice versa.