Svelte Slot 屬性

在當(dāng)前程序中，我們有一個(gè)名為 <Hoverable>的組件來(lái)跟蹤鼠標(biāo)是否放在上面，它需要將數(shù)據(jù)傳回父組件，以便我們可以渲染插入的內(nèi)容。

為此，我們使用 插槽屬性（slot props)。將Hoverable.svelte的hovering的值傳遞給它的slot：

<div on:mouseenter={enter} on:mouseleave={leave}>
	<slot hovering={hovering}></slot>
</div>

請(qǐng)記住，你可以使用?{hovering}? 這種速記寫(xiě)法。

然后我們使用let來(lái)暴露<Hoverable> 組件內(nèi)的內(nèi)容：

<Hoverable let:hovering={hovering}>
	<div class:active={hovering}>
		{#if hovering}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>

如果你想在其父組件中調(diào)用active， 你也可以給該變量重命名，

<Hoverable let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>

你可以根據(jù)需要擁有任意數(shù)量的組件，并在組件內(nèi)部聲明插槽屬性。

命名插槽也擁有有屬性，但是?let?指令需要寫(xiě)在 ?slot="..."? 標(biāo)簽上而不是組件上。

示例代碼

• App.svelte

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

<style>
	div {
		padding: 1em;
		margin: 0 0 1em 0;
		background-color: #eee;
	}

	.active {
		background-color: #ff3e00;
		color: white;
	}
</style>

<Hoverable let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>

<Hoverable let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>

<Hoverable let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>

• Hoverable.svelte

<script>
	let hovering;

	function enter() {
		hovering = true;
	}

	function leave() {
		hovering = false;
	}
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
	<slot hovering={hovering}></slot>
</div>