Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Jdubstep1357's avatar

How to pass child component's data to parent component

I made two different components: a child and a parent.

The parent component has a button that shows the current time upon clicking. The child component has a foreach loop that loops through each record and displays a button that again shows the current date and time.

If I refresh the parent page, none of the child elements are affected. That being said, each child, upon clicking the Refresh Child button, shows the date and time for that specific record for that single row, AND NOT THE PARENT OR OTHER CHILDREN.

How can I have it so that upon clicking a child's refresh button, both the single selected child element AND parent element gets refreshed?

Here is my parent view:

<div>
    @foreach ($contacts as $contact)
        @include('livewire.say-hi', 
        ['contact' => $contact], 
        key($contact->name))
    @endforeach

    <!-- Refreshes parent outside of @ foreach-->
    <!-- Only refreshes parent component, NOT Children -->
    <button wire:click="$refresh">Refresh Parent</button>

    {{ now() }}
</div>

Here is the parent controller:

<?php

namespace App\Livewire;

use Livewire\Component;

class HelloWorld extends Component
{
    public $contacts;
    public function mount()
    {
        $this->contacts = Contact::all();
    }

    public function render()
    {
        return view('livewire.hello-world');
    }
}

Here is my child view:

<div>

    <input type="text" wire:model="name">
    {{ $contact->name }}: Refresh time: {{ now() }}

    <!-- On click refreshes page and shows time of change -->
    <!-- Only refreshes single line -->
    <button wire:click="$refresh">Refresh Child</button>

<!-- How to refresh SINGLE child component, AND Parent??? -->

<!-- Whichever child row I refresh, only that would be changed, alonside the parent -->
</div>

And finally, my child controller:

<?php

namespace App\Livewire;

use Livewire\Component;

class SayHi extends Component
{
    public $contact;
    
    public function mount(Contact $contact)
    {
        $this->contact = $contact;
    }
    public function render()
    {
        return view('livewire.say-hi');
    }
}
0 likes
3 replies
Jdubstep1357's avatar

@AlexanderWright Sorry for the late response. I tried using $emit, and it had some problems, but upon reviewing the documentation more closely I can totally see some ways that would help me in the future.

1 like
johnniejw's avatar
Level 1

you render

public function render()
{
	return view('livewire.hello-world'', ['modelo' => $this->modelo]);
}
1 like

Please or to participate in this conversation.