Svelte旧版 API

<slot>

在 Svelte 5 中，内容可以通过片段的形式传递给组件，并使用渲染标签进行渲染。

在旧版模式下，组件标签内的内容被视为插槽内容，组件可以使用 <slot> 元素渲染它

应用

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

<Modal>This is some slotted content</Modal>

模态框

<div class="modal">
	<slot></slot>
</div>

如果要渲染常规的 <slot> 元素，可以使用 <svelte:element this={'slot'} />。

命名插槽

除了默认插槽之外，组件还可以具有命名插槽。在父级方面，将 slot="..." 属性添加到组件标签内直接的元素、组件或 <svelte:fragment>。

应用

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

	let open = true;
</script>

{#if open}
	<Modal>
		This is some slotted content

		<div slot="buttons">
			<button on:click={() => open = false}>
				close
			</button>
		</div>
	</Modal>
{/if}

在子级方面，添加相应的 <slot name="..."> 元素

模态框

<div class="modal">
	<slot></slot>
	<hr>
	<slot name="buttons"></slot>
</div>

回退内容

如果没有提供插槽内容，组件可以通过将其放在 <slot> 元素内来定义回退内容

<slot>
	This will be rendered if no slotted content is provided
</slot>

将数据传递到插槽内容

插槽可以渲染零次或多次，并且可以使用 props 将值传回父级。父级使用 let: 指令将值公开给插槽模板。

FancyList

<ul>
	{#each items as data}
		<li class="fancy">
			<!-- 'item' here... -->
			<slot item={process(data)} />
		</li>
	{/each}
</ul>

应用

<!-- ...corresponds to 'item' here: -->
<FancyList {items} let:item={processed}>
	<div>{processed.text}</div>
</FancyList>

通常的简写规则适用——let:item 等效于 let:item={item}，<slot {item}> 等效于 <slot item={item}>。

命名插槽也可以公开值。let: 指令位于具有 slot 属性的元素上。

FancyList

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

<slot name="footer" />

应用

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

在 GitHub 上编辑此页面

on $$slots