Is there anyway to send event from Parent component to certain child component?

#1

image

Every single cell action buttons is a child component. The child component is a custom component.
and i have single modal blade on parent component.

example: when i click edit button (on child component), i send show modal event to the parent with binding model property, then when i update the model (update method is on parent component), I refresh the parent component to update.

with this setup, it refreshes all child components.

Is there anyway to refresh data only to the certain child component from parent component ?

If this is not a good practice ? can someone give some insight how is the good practice for nested component?

#2

Hey, @gwillyoo

Use Events

#3

I know Events. But I still dont understand.

My understanding from your reply.
For example in all child components i have refreshChild listener, I just emit the refreshChild from parent component?

If this is what you mean, the parent will send the event to all children right? What i want to achieve is send the event from parent to the specific child component ? is it possible? Can you give me an example?

#4

Not exactly.

The parent component broadcast an event and the child who listen to the broadcast should respond.

For example:

parent component:

public function save()
{
   // save data
   $this->emit('dataSaved');
}

If you want a specific child to listen to this event you can do the following:

protected $listeners = ['dataSaved' => 'parentSaved'];

public function parentSaved()
{
   // do something right here
}

The Component child will listen to the event from the parent and should respond.

I hope this clear enough to you.

For more info please see the doc:

#5

Parent component

protected $listener = ['showEdit'];

public function showEdit(Worker $worker)
{
   $this->worker = $worker;
   $this->showModal();
}

public function save()
{
    $this->emit('workerUpdated', $this->worker);
}

Here is my child component and i have more than one of it.


    protected $listeners = [
        'workerUpdated'
    ];

    public function showEdit()
    {
        $this->emitUp('showEdit', $this->worker);
    }

    public function workerUpdated(Worker $worker)
    {
        if ($this->worker->id === $worker->id) {
            $this->emitSelf('$refresh');
        };
    }

After trying your answer, so every child component should have an identifier sent to parent component and the parent send the identifier back the child.

If there is no identifier such as Worker above, How to send the child component (name or id) to be sent to the parent ?

Thank you @skywalker.

#6

Take a look here: