named slots 子節點就是放這裡

named slots 是什麼呢，還記得昨天跟大家分享如何使用 slot 來製作複合式的元件，但是大家應該會問如果有多個 slot。那要怎麼決定哪個內容要放哪裡，這個答案就是今天要分享的內容。

需求是什麼

在介紹命名插座之前我想請大家先看看下面的例子，簡單描述一下就是我們有兩個元件，分別為App.svelte跟ContactCard.svelte，其中App.svelte的功用在於使用ContactCard並呈現聯絡人的資訊，如下所示。

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
    <span slot="name">
        P. Sherman
    </span>

    <span slot="address">
        42 Wallaby Way<br>
        Sydney
    </span>
</ContactCard>

而ContactCard.svelte的功能就在於定義聯絡簿的樣式，相關內容如下。

<style>
    .contact-card {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
    }

    h2 {
        padding: 0 0 0.2em 0;
        margin: 0 0 1em 0;
        border-bottom: 1px solid #ff3e00
    }

    .address, .email {
        padding: 0 0 0 1.5em;
        background:  0 50% no-repeat;
        background-size: 1em 1em;
        margin: 0 0 0.5em 0;
        line-height: 1.2;
    }

    .address { background-image: url(tutorial/icons/map-marker.svg) }
    .email   { background-image: url(tutorial/icons/email.svg) }
    .missing { color: #999 }
</style>

<article class="contact-card">
    <h2>
        <slot>
            <span class="missing">Unknown name</span>
        </slot>
    </h2>

    <div class="address">
        <slot>
            <span class="missing">Unknown address</span>
        </slot>
    </div>

    <div class="email">
        <slot>
            <span class="missing">Unknown email</span>
        </slot>
    </div>
</article>

好了，基本設定介紹完了，現在要做的是將把對應的內容填到對的位置，這該怎麼處理呢?

named slots 命名插座

所以今天的內容就是要把對應的內容填到對的位置上，在App.svelte內我們有設定屬性slot="name"跟slot="address"這就是要指定到對應的slot的屬性，接下來我們將ContactCard.svelte的html內容修改如下。

<article class="contact-card">
    <h2>
        <slot name="name">
            <span class="missing">Unknown name</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">Unknown address</span>
        </slot>
    </div>

    <div class="email">
        <slot name="email">
            <span class="missing">Unknown email</span>
        </slot>
    </div>
</article>

這樣一來就可以將命名為slot="name"對應到slot name="name"，命名為slot="address"的對應到slot name="address"了，然後昨天提到的預設內容，因為email沒有對應到所以就顯示預設內容了。

小結

今天更進一步介紹命名插座，可以將子節點要指定到元件的特定位置給予一個名子，這樣就可以決定甚麼子節點要放在甚麼位置了。