iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0

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 命名插座來決定子節點要放置的地方,還有向上面例子一樣,如果變數名稱相等就可以省略賦值的寫法了。


上一篇
DAY15- named slots 命名插座
下一篇
DAY17- 元件的生命週期
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言