slot

seperti halnya elemen yang dapat memiliki anak.

begitu juga dengan komponen. Namun, sebelum sebuah komponen dapat menerima anak, komponen harus tahu di mana harus meletakkannya. Kita melakukan ini dengan elemen slot.

<!-- @filename: App.svelte -->
<script>
	import Card from './Card.svelte';
</script>

<Card>
	<span>Patrick BATEMAN</span>
	<span>Vice President</span>
</Card>

<!-- @filename: Card.svelte -->
<script>
</script>

<div>
	<slot />
</div>

slot name

<!-- @filename: App.svelte -->
<script>
	import Card from './Card.svelte';
</script>

<main>
	<Card>
		<span>Patrick BATEMAN</span>
		<span>Vice President</span>

		<span slot="telephone">212 555 6342</span>

		<span slot="company">
			Pierce &amp; Pierce
			<small>Mergers and Aquisitions</small>
		</span>

		<span slot="address"
			>358 Exchange Place, New York, N.Y. 100099 fax 212 555 6390 telex 10 4534</span
		>
	</Card>
</main>

<!-- @filename: Card.svelte -->
<div>
	<header>
		<slot name="telephone" />
		<slot name="company" />
	</header>

	<slot />

	<footer>
		<slot name="address" />
	</footer>
</div>

slot fallback

Sebuah komponen dapat menentukan fallback untuk setiap slot yang kosong, dengan meletakkan konten di dalam elemen slot:

<!-- @filename: Card.svelte" {3,7,12,17 -->
<div class="card">
	<header>
		<slot name="telephone">
			<i>telephone</i>
		</slot>

		<slot name="company">
			<i>company name</i>
		</slot>
	</header>

	<slot>
		<i>name</i>
	</slot>

	<footer>
		<slot name="address">
			<i>address</i>
		</slot>
	</footer>
</div>

slot props

Slot dapat memberikan nilai kembali ke induk menggunakan props. Induk mengekspos nilai ke template slot menggunakan let:

Aturan singkatan yang biasa berlaku:

let:item setara dengan let:item={data}
bisa juga let:data atau lainnya sesuka hati
<slot {item}> setara dengan <slot item={item}>

lihat kode dibawah ini:

<!-- @filename: App.svelte  -->
<script>
	import FancyList from './FancyList.svelte'; 

	const items = [
		{ label: 'a', value: 'a1' },
		{ label: 'b', value: 'b2' }
	];
</script>

<FancyList {items}>
	<div slot="item" let:item={data}>{data.label}-{data.value}</div>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>

<!-- @filename: FancyList.svelte -->
<script>
	export let items;
</script>

<ul>
	{#each items as item}
		<li class="fancy">
			<slot name="item" {item} />
		</li>
	{/each}
</ul>

<slot name="footer" />

pada nomor 10, kita mengirim data props items ke komponen FancyList, di komponen FancyList data props items tersebut di loop dan mengembalikan data lagi ke komponen induk.

pada nomor 11, kita menerima data dan kita tampung di let:item, item ini bebas yah mau kita beri nama apa aja. jangan lupa untuk menambahkan tag name slot. jika kita tidak ingin menggunakan name slot bisa saja. lihat contoh dibawah ini.

berikut ini contoh tanpa name slot. let: nya diletakan dikomponen FancyList

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

	const items = [
		{ label: 'a', value: 'a1' },
		{ label: 'b', value: 'b2' }
	];
</script>

<FancyList {items} let:item={data}>
	<div>{data.label}-{data.value}</div>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>

<!-- @filename: FancyList.svelte -->
<script>
	export let items;
</script>

<ul>
	{#each items as item}
		<li class="fancy">
			<slot {item} />
		</li>
	{/each}
</ul>

<slot name="footer" />

check contohnya disini: slot props (let:)