slot-props

<!-- App.svelte -->
<script>
	import Hoverable from './Hoverable.svelte';
</script>

<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>

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

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

<!-- 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>

 

https://svelte.dev/tutorial/slot-props

Component composition / Slot props • Svelte Tutorial

저작자표시

'Svelte > tutorial' 카테고리의 다른 글

sharing-code  (0)	2022.02.01
context-api  (0)	2022.02.01
slot-props  (0)	2022.02.01
optional-slots  (0)	2022.02.01
named-slots  (0)	2022.02.01
slots  (0)	2022.02.01