Nesting Components

Livewire supports nesting components. Component nesting can be an extremely powerful technique, but there are a few gotchas worth mentioning up-front:

  1. Nested components CAN accept data parameters from their parents, HOWEVER they are not reactive like props from a Vue component.
  2. Livewire components should NOT be used for extracting Blade snippets into separate files. For these cases, Blade includes or components are preferable.

Here is an example of a nested component called add-user-note from another Livewire component's view.

class UserDashboard extends Component
{
    public User $user;
}
<div>
    <h2>User Details:</h2>
    Name: {{ $user->name }}
    Email: {{ $user->email }}

    <h2>User Notes:</h2>
    <div>
        @livewire('add-user-note', ['user' => $user])
    </div>
</div>

Keeping Track Of Components In A Loop

Similar to VueJs, if you render a component inside a loop, Livewire has no way of keeping track of which one is which. To remedy this, livewire offers a special "key" syntax:

<div>
    @foreach ($users as $user)
        @livewire('user-profile', ['user' => $user], key($user->id))
    @endforeach
</div>

If you are on Laravel 7 or above, you can use the tag syntax.

<div>
    @foreach ($users as $user)
        <livewire:user-profile :user="$user" :wire:key="$user->id">
    @endforeach
</div>

Sibling Components in a Loop

In some situations, you may find the need to have sibling components inside of a loop, this situation requires additional consideration for the wire:key value.

Each component will need its own unique wire:key, but using the method above will lead to both sibling components having the same key, which will cause unforeseen issues. To combat this, you could ensure that each wire:key is unique by prefixing it with the component name, for example:

<!-- user-profile component -->
<div>
    // Bad
    <livewire:user-profile-one :user="$user" :wire:key="$user->id">
    <livewire:user-profile-two :user="$user" :wire:key="$user->id">

    // Good
    <livewire:user-profile-one :user="$user" :wire:key="'user-profile-one-'.$user->id">
    <livewire:user-profile-two :user="$user" :wire:key="'user-profile-two-'.$user->id">
</div>
← Previous Topic

Lifecycle Hooks

Next Topic →

Validation