在某些情況下，您可能希望根據(jù)父級(jí)是否傳入某個(gè)插槽的內(nèi)容來(lái)控制組件的某些部分。也許您在該插槽周?chē)幸粋€(gè)包裝器，如果插槽為空，您不想渲染它。或者您可能只想在插槽存在時(shí)應(yīng)用一個(gè)類(lèi)。您可以通過(guò)檢查特殊 ?$$slots? 變量的屬性來(lái)做到這一點(diǎn)。

?$$slots? 是一個(gè)對(duì)象，它的鍵是父組件傳入的插槽名稱(chēng)。如果父級(jí)將一個(gè)插槽留空，則 ?$$slots? 將沒(méi)有該插槽的條目。

請(qǐng)注意，此示例中 ?<Project>? 的兩個(gè)實(shí)例都呈現(xiàn)了一個(gè)用于注釋的容器和一個(gè)通知點(diǎn)，即使只有一個(gè)具有注釋。我們想使用 ?$$slots? 來(lái)確保我們只在父級(jí) ?<App>? 為?comments?插槽傳遞內(nèi)容時(shí)才渲染這些元素。

在 ?Project.svelte? 中，更新 ?<article>? 上的 ?class:has-discussion? 指令：

<article class:has-discussion={$slots.comments}>

接下來(lái)，將?comments?插槽及其 ?<div>? 包裝在檢查 ?$$slots? 的 ?if? 塊中：

{#if $slots.comments}
	<div class="discussion">
		<h3>Comments</h3>
		<slot name="comments"></slot>
	</div>
{/if}

現(xiàn)在，當(dāng) ?<App>? 將?comments?插槽留空時(shí)，comments 容器和 notification 將不會(huì)呈現(xiàn)。

示例代碼

• App.svelte

<script>
	import Project from './Project.svelte'
	import Comment from './Comment.svelte'
</script>

<style>
	h1 {
		font-weight: 300;
		margin: 0 1rem;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0.5rem;
		display: flex;
	}

	@media (max-width: 600px) {
		ul {
			flex-direction: column;
		}
	}

	li {
		padding: 0.5rem;
		flex: 1 1 50%;
		min-width: 200px;
	}
</style>

<h1>
	Projects
</h1>

<ul>
	<li>
		<Project
			title="Add Typescript support"
			tasksCompleted={25}
			totalTasks={57}
		>
			<div slot="comments">
				<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
					<p>Those interface tests are now passing.</p>
				</Comment>
			</div>
		</Project>
	</li>
	<li>
		<Project
			title="Update documentation"
			tasksCompleted={18}
			totalTasks={21}
		/>
	</li>
</ul>

• Comment.svelte

<script>
	export let name;
	export let postedAt;

	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
</script>

<style>
	article {
		background-color: #fff;
		border: 1px #ccc solid;
		border-radius: 4px;
		padding: 1rem;
	}

	.header {
		align-items: center;
		display: flex;
	}

	.details {
		flex: 1 1 auto;
		margin-left: 0.5rem
	}

	h4 {
		margin: 0;
	}

	time {
		color: #777;
		font-size: 0.75rem;
		text-decoration: underline;
	}

	.body {
		margin-top: 0.5rem;
	}

	.body :global(p) {
		margin: 0;
	}
</style>

<article>
	<div class="header">
		<img src={avatar} alt="" height="32" width="32">
		<div class="details">
			<h4>{name}</h4>
			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
		</div>
	</div>
	<div class="body">
		<slot></slot>
	</div>
</article>

• Project.svelte

<script>
	export let title;
	export let tasksCompleted = 0;
	export let totalTasks = 0;
</script>

<style>
	article {
		border: 1px #ccc solid;
		border-radius: 4px;
		position: relative;
	}

	article > div {
		padding: 1.25rem;
	}

	article.has-discussion::after {
		content: '';
		background-color: #ff3e00;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		height: 20px;
		position: absolute;
		right: -10px;
		top: -10px;
		width: 20px;
	}

	h2,
	h3 {
		margin: 0 0 0.5rem;
	}

	h3 {
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	p {
		color: #777;
		margin: 0;
	}

	.discussion {
		background-color: #eee;
		border-top: 1px #ccc solid;
	}
</style>

<article class:has-discussion={$slots.comments}>
	<div>
		<h2>{title}</h2>
		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
	</div>
	{#if $slots.comments}
		<div class="discussion">
			<h3>Comments</h3>
			<slot name="comments"></slot>
		</div>
	{/if}
</article>