Livewire 支持 巢狀組件，將組件進行巢狀化是非常強大的功能，巢狀組件能夠從其父組件取得資料參數，這是一個名為 add-user-note 的巢狀組件，被另一個 Livewire 組件視圖叫用

//App/Http/Livewire/UserDashboard.php

class UserDashboard extends Component
{
    public User $user;
}

//resources/views/livewire/userDashboard.blade.php

<div>
    <h2>User Details:</h2>
    Name: {{ $user->name }}
    Email: {{ $user->email }}

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

或許你會有在迴圈中持續追蹤組件的需求，沒問題!

就跟 Vue.js 一樣，如果你在迴圈裡頭去渲染組件，Livewire 無法去追蹤哪個是哪個。為了解決這個尷尬的狀況，livewire 提供了一個特殊的 "key" 語法:

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

假如你是 Laravel 7 或以上的版本，你還能夠使用 tag 語法，寫法則是像這樣

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

在迴圈中的相鄰組件

在某些情況下，你也許會需要在迴圈中找到相鄰組件。這種情況就需要更多的考慮如何使用 key 值，每一個組件都需要它專屬的 key 值，但使用以上的方法將會導致相鄰的組件會擁有相同的 key，這將導致不可見的問題

為了解決這個問題，你需要確保每一個key都是唯一的，那該怎麼做勒?

有個不錯的策略是你可以把組件名稱作為key的前綴，舉例來說:

<!-- user-profile component -->
<div>
    //不好的做法，容易導致不同組件有相同的key
    <livewire:user-profile-one :user="$user" :key="$user->id">
    <livewire:user-profile-two :user="$user" :key="$user->id">

    //好的做法
    <livewire:user-profile-one :user="$user" :key="'user-profile-one-'.$user->id">
    <livewire:user-profile-two :user="$user" :key="'user-profile-two-'.$user->id">
</div>