Laravel Livewire Events from Parent to Child and Using Parameters

We now have the complete stepbystep form flow the next thing we are going to implement is passing the identifier corresponding to the record created in step one that is when we process the first form from the main component the ID is generated in the database which we will then pass to all the children since remember that all the child components have a foreign type relationship with the general contact

We are going to define an event the same event in all the child components to receive the PK from the parent

app/Http/Livewire/Contact/Company.php
app/Http/Livewire/Contact/Person.php
app/Http/Livewire/Contact/Detail.php

protected $listeners = ['parentId'];   
// ***
public $parentId;
// ***
public function parentId($parentId)
{
   $this->parentId = $parentId;
}

As you can see it is the reverse approach to step by step since now it is the children that register the listener event the problem that we are going to have is that as the child components are not rendered by default but rather based on some condition:

@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail')
@else

Passing parameters from parent to children

As we discussed earlier passing events from parent to child for our current implementation is not going to work because at the time the parent event is sent the child components have not yet been created one possible approach to using events is to hide the stepbystep forms using CSS and display them based on the current step however using events is not necessary to send data from a parent component to its children we can perfectly use parameter passing instead as we see below

@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])

And we define the mount method in each of the child steps

app/Http/Livewire/Contact/Company.php
app/Http/Livewire/Contact/Person.php
app/Http/Livewire/Contact/Detail.php
function mount($parentId)
{
  $this->parentId($parentId);
}

Video Transcript

Here I have several very important things that I want to explain to you lets go first with the events lets do a little extraction since here you can see that there is code that was not there before Ill explain a little about this This is tied a little to what I was telling you that it is not necessary to expand the events at least everything depends a little but at least in this particular case for what would be the communication between the father and the son since here we already have direct communication because this is the father and here we have the children

@if ($step == 1)
   <form wire:submit.prevent='submit'>
       <x-label>{{ __('Subject') }}</x-label>
       <x-input-error for='subject' />
       <x-input type='text' wire:model='subject' />
       <x-label>{{ __('Type') }}</x-label>
       <x-input-error for='type' />
       <select wire:model='type'>
           <option value=""></option>
           <option value="person">{{ __('Person') }}</option>
           <option value="company">{{ __('Company') }}</option>
       </select>
       <x-label>{{ __('Message') }}</x-label>
       <x-input-error for='message' />
       <textarea wire:model='message'></textarea>
       <div class="flex mt-5 gap-3">
           <x-button type='submit'>{{ __('Send') }}</x-button>
       </div>
   </form>
@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])
@else
   END
@endif
{{-- @livewire('contact.person') --}}

The parent is another Livewire component that includes the form from the previous view the steps or child components are each of the components loaded in the parent with livewire

We can send them any information whenever we want and take advantage of what is in quotes the reactivity that we have here that when we update a property it is automatically updated but we are already on our way so what was the problem with the events before we start I had forgotten to tell you before we also have another way of using the events instead of placing the listener here

protected $listeners = ['parentId'];

You can also use the attribute called On here which we can

use Livewire\Attributes\On;
#[On('parentId')] 
   function parentId($id)
   {
       $this->parentId = $id;
       $c = ContactPerson::where('contact_general_id', $this->parentId)->first();
       if ($c != null) {
           $this->name = $c->name;
           $this->surname = $c->surname;
           $this->other = $c->other;
           $this->choices = $c->choices;
       }
   }

Import from the same as we did before with the others that we saw then there you also have this duality again you use the one you want you simply place it as a decorator to the method that we have defined here then I leave it commented for you as a reference then you either use this one or you use this scheme the one you want is independent Im going to leave it like that since well I have it defined here on the one hand

So why are the events not working I think its something that changed because at least for the previous version that I tested which was 9 and 10 of Laravel with step it didnt work well for me I dont know if its something that changed there etc but I see that it isnt the problem that we have here is that we have a kind of race condition

$this->dispatch('stepEvent', 4);
***
@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])
@else
   END

When we dispatch the event from the parent that indicates that here we can see the parents ID if we come here There is no one listening to it because none has been drawn yet that is to say the event is dispatched here we have nothing rendered and therefore by not having anything rendered there is no component that receives it it is that simple therefore the identifier will never appear

In other words the reference to the Generals parent apk will never arrive Remember that this is the Generals app precisely this function because again this event will not be executed to do this test what I did here was place the printout of the parent ID here so that it could be seen if it is arriving or not and here you can see this is the persons here you can see how I receive it

***
      </form>
@elseif ($step == 2)
   @livewire('contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
   @livewire('contact.person', ['parentId' => $pk])
@elseif ($step == 3)
   @livewire('contact.detail', ['parentId' => $pk])
@else
   END
@endif
{{-- @livewire('contact.person') --}}

Im going to comment on this for a moment so that it doesnt make noise so that I dont receive anything and it remains exactly the same as we had it before it would arrive through the event and little else here here the syntax also changes a bit you can put para in ID it doesnt matter to me but the name of the parameter doesnt matter and here we are sending it

$this->dispatch('stepEvent', 4);

Here again I am using something else I am going to remove it for a moment to test it I remove all this and this here Well lets see then here I am also printing it on the outside lets go
So remember that at least in my case for my example I would recommend that you first read the whole explanation and then replicate it do your tests and draw your own conclusions I am printing the parent ID which I am establishing again here as a normal public property here so we can access it before here
Here I go again there it is perfect I had forgotten to save here therefore I had left the Mount and therefore It was that error that had appeared on the screen here you can see that nothing appears we do not have the apk again here you can see the print we have nothing And that is the problem that is not arriving and it is not arriving because it is not rendered yet and how can you test this so that you see that it is real you can render this at least momentarily over here is the advantage that we have of using components that we can place it wherever we want in this case Remember that it is not being rendered by the conditional since it does not exist or this until step is triggered but when stet is triggered or we are here updating this We are also triggering the parent and therefore nobody receives it since this no matter how much it takes some time to create the life cycle that we presented before to mount and then you can start receiving the events then from that time the event has already passed and nobody received it then I am going to place it here to see what happens I come back here Okay here Notice that it already appears no you have to have no error because it is correct it is validated in this case This one does exist therefore if there is someone who receives it that is what is important This is the other one the step by step and here notice that it is already at 41 so there you can have as a conclusion that we cannot pass an event when we have it here in a conditional So as I told you it is also important that you understand that we are doing this as an experiment to work a little more with lightware since I am tired of telling you about what it is to customize the steps the information that the steps handle etc what interests me is to convey to you a little about what they are how it works internally so that when you have to do a similar implementation you already know what its advantages and disadvantages are how it works So that is the idea a little bit and that is why I make these types of videos But well here the important thing is that you conclude from what was commented above this only receives the event because it is defined when the event is sent from the parent while it is not defined So this would not work In case it is necessary for you to use the events here what you could do is hide it using ccs so that it is always present but simply hidden because the important thing here or the problem is that it is not rendered yet but if you hide it by ccs or with ccs it will always be available that is it exists what happens is that it is hidden by ccs and well then when it corresponds you simply show it by ccs I am not going to do that implementation I do not see that it is worth it but as I say it is a possible solution since Obviously if the component does not exist it is not loaded obviously it will not receive anything which is the problem we have

So with that I conclude what is the use of events here in this case between the parent to the children that usually does not make much sense since as I tell you The problem is always the communication between the child and the parent that is When we have a distance as who says from the child within the parent as we have it here we have a component that is encompassing another component we want to communicate it from the child to the parent something that can be very common suppose that instead of this We also have a list of publications here we have a kind of detail when we update the detail for example a change of state here a certain color changes then there we send a message an event between the child to the parent things of that type or we simply eliminate it from here It has to disappear from here we send an event but when it is from the parent it is very simple Because if you eliminate it here automatically it has to also be eliminated here based on some parameter that you are determining just as it was before So in this case the best we can do is use the sending of parameters just as we do in the tracks so for this well we use the following syntax there is nothing strange it is the Same as the syntax we use at the view level here we indicate the name of the parameter

use Livewire\Attributes\On;
#[On('parentId')] 
   function parentId($id)
   {
       $this->parentId = $id;
       $c = ContactPerson::where('contact_general_id', $this->parentId)->first();
       if ($c != null) {
           $this->name = $c->name;
           $this->surname = $c->surname;
           $this->other = $c->other;
           $this->choices = $c->choices;
       }
   }

And over here eh what is the value and we receive it from here through the Mode just as we have done previously and little more to say then even though it is here I maintained the duality then or I receive it through here I call the parent ID something that you can do perfectly since in the end it is a method for it to do its job you receive it through the event in case it exists But well we already know that it is not going to work eh also an important detail that I have forgotten to tell you Here you can also place the names of the parameters here for example I placed ID and it would also work correctly since it is the name of the parameter that I have at least defined here of course here they all have to be the same all the children have to have the same name of the parameter if not leave it like that without defining a name and it would receive it is by position well Lets go to the last step which is again to send the parameter this again has nothing strange and here you will see that it will receive it again remember that here I am printing it and the important thing is that it arrives so we return Here I am going to create like 48 I think I am going a person I place or anything and here we can see it so finally we have the blessed identifier and with which we can do anything with it at this point Im going to remove this so it doesnt make noise that in this case with this paren ID the only thing we do is the creation part Well apart from looking for it the creation and update part as you can see so nothing that was all I wanted to tell you about here there are several little things now from this point I would ask you to do the same things that I say and you yourself draw your own conclusions and know exactly how it works and if you have any questions you can go back a little in the video and watch the explanation again and without further ado lets go to the next class

05-10-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Laravel Livewire Events from Parent to Child and Using Parameters