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沒有對應到所以就顯示預設內容了。

小結

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