本来是没打算分成两天的。但第一天放入了程序码让文章看起来比较冗长，所以只好拆两天啦！今天一样也是 嵌套元件 Nesting Components 的部分。昨天在演示了一般父、子元件的基础用法，那今天就来演示最常见的嵌套元件用法吧！！

无论是透过 PHP 或是 Vue 在做页面时，遇到大量重复的资料要显示在页面上，像是铁人赛的文章列表。通常都会将显示资料的区块写成一个元件，再藉由回圈重复刷出该元件来达成页面上的显示。当然这在 Livewire 中也是小菜一碟！！

有引入两种方式：

@foreach($articles as $article)
        @livewire('card', ['title' => $article->title], key($article->id))
@endforeach

@foreach($articles as $article)
        <livewire:card : title ="$article->title" :wire:key="$article->id">
@endforeach

要注意的是 key 必需要有！

虽然在 Livewire 中就算 key 没给也不会报错，但如果你有要对资料做变动就一定要有 key。则在资料变动时会导致 DOM 发生无法意料的错误，例如要删除某笔资料就会造成画面渲染的错误！！

而有了 key 之後也要避免 key 的名称重复，如同 HTML 中的 id 一样，因此在给 key 的时候前面可以加上一些字串当作前辍好来避免重复使用同样名字的key，官方文件也有举几个例子：

<!-- 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>

范例

那当然今天也会有范例给大家试试，有时间的话不妨把范例中的 key 拿掉试试看会发生什麽事！！

今天的范例是做一个文章列表， DEMO网址：

父元件

在父元件的部分会有一个变数来放文章的内容，由於不使用资料库进行实作，因此用 Array 放假资料代替。并在前端画面透过 @foreach 刷出多的子元件

<?php

namespace App\Http\Livewire\Example;

use Livewire\Component;

class Day11 extends Component
{
    public $articles = array(
        [
            'id' => 1,
            'title' => 'Day 01 | 前言与赛程',
            'content' => '从 2018 年介绍 Vue 的 UI Framework — Quasar ，到前年的 LINE Bot。 每年铁人赛都刚好是工作最繁忙的下半年，希望下次能办...',
            'url' => 'https://ithelp.ithome.com.tw/articles/10259642',
        ],
        [
            'id' => 2,
            'title' => 'Day 02 | Laravel Livewire 基本介绍',
            'content' => 'Livewire 是 Laravel 的全端框架，能建立像 Vue 一样的动态页面的同时又能保有 Laravel 原有的特性。除此之外在 SEO 方面仍跟原本...',
            'url' => 'https://ithelp.ithome.com.tw/articles/10259945',
        ],
        [
            'id' => 3,
            'title' => 'Day 03 | 透过指令建立元件',
            'content' => '安装并部署 Livewire 的步骤没有很多，照着做不用三分钟就能完成罗！今天一样是照着官方文件带大家做一次罗～ 安装 Livewire 官方文件 首先要先安装...',
            'url' => 'https://ithelp.ithome.com.tw/articles/10260438',
        ],
    );
    
    public function render()
    {
        return view('livewire.example.day11');
    }

    public function clearArticle($index)
    {
        unset($this->articles[$index]);
    }
}

<div class="text-center p-5">
    <h2>Day11: 嵌套元件（二）</h2>

    @foreach($articles as $article)
        @livewire('example.day11-card', ['article' => $article], key('article-2021-' . $article['id']))
    @endforeach

    <div class="my-5">
        <button class="ui button" wire:click="clearArticle(1)" >删除 Day2</button>
    </div>
</div>

子元件

子元件就是一张显示来自父元件资料的卡片，即为显示每篇文章的画面。

<?php

namespace App\Http\Livewire\Example;

use Livewire\Component;

class Day11Card extends Component
{
    public $article;

    public function render()
    {
        return view('livewire.example.day11-card');
    }
}

<div class="flex justify-center mt-5">
    <div class="rounded shadow-md bg-grey-50 border-2 w-3/6 p-4 pl-8 text-left">
        <h3>
            <a class="text-black" href="{{ $article['url'] }}" target="_blank">
                {{ $article['title'] }}
            </a>
        </h3>
        <div class="text-gray-500">
        {{ $article['content'] }}
        </div>
    </div>
</div>