slot props 元件如何傳遞變數給子節點

slot props 是什麼是今天的主題，在分享完 svelte slot 的基本內容後要來告訴大家插座元件怎麼傳遞變數到子節點。

本文同步放置於此

回顧一下前幾天的內容

前幾天介紹了slot是什麼，並且介紹了svelte slot 的基本內容跟named slots 命名插座後大家應該知道要怎麼在元件內插入自定義的子節點。

但是一般的svelte元件可以宣告變數以及屬性，若是子節點不能使用變數這樣在開發上有著很多不方便，因此今天要來分享如何將元件的變數傳遞給子節點使用。

slot props 插座的屬性

之前有分享過在html上使用變數，但是今天在元件上的變數如何教過子節點使用呢？接下來先用例子來具體的描述我們的需求，請看以下例子。

跟之前一樣，我們需要兩個元件，以下先介紹使用插座元件的程式進入點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>
	<div class:active={hovering}>
		{#if hovering}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>

當然上面例子直接跑會報錯，因為子節點沒有定義hovering，而這變數是我們要由Hoverable.svelte傳遞到子節點的，所以我們需要定義這個變數在Hoverable.svelte，以下是我們實作Hoverable.svelte的內容。

子節點的變數來源

下面就是我們實作的Hoverable.svelte，當然不能忘記要傳遞給子節點的變數。

<script>
	let hovering;

	function enter() {
		hovering = true;
	}

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

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

這元件的功用在於監聽滑鼠移動事件，檢查鼠標是否移動到元件上面，再來就是讓其子節點使用hovering這屬性，所以我們在slot中定義slotHovering這個變數，來針對狀態不同顯示不同的樣式。

準備好需要的元件後接下來要說明如何從Hoverable.svelte將hovering取出來傳遞給子節點。

取出變數傳遞給子節點

在準備就緒後我們就要把子節點與插座元件之間的關聯給實作出來，當然大家可以看一下下列的式子。

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

上面例子我們針對Hoverable這個標籤加上let:slotHovering={hovering}這指的是將元件插座的slotHovering變數取出來跟子節點的變數hovering綁定在一起的意思。因此調整一下讓讀者們看得更清楚。

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

小結

今天跟大家分享一下關於slot要怎麼傳遞變數給子節點，當然今天的內容跟昨天一樣，如果有多個slot可以使用named slots 命名插座來決定子節點要放置的地方，還有向上面例子一樣，如果變數名稱相等就可以省略賦值的寫法了。