组件插槽

约 251 字小于 1 分钟

2026-09-20

在 svelte 中，组件的内容也是使用 snippet 来定义的，我们一样可以通过 @render 来渲染组件内容。

<script lang="ts">
	import type { Snippet } from 'svelte';

	const { children }: { children: Snippet } = $props();
</script>

{@render children()}

svelte 也和 vue 一样，拥有插槽的概念，我们上面使用的 children 就是默认插槽，我们也可以使用具名插槽。

<script lang="ts">
	import type { Snippet } from 'svelte';

	const { children, namedChildren }: { children: Snippet; namedChildren: Snippet } = $props();
</script>

{@render children()}

<h3> {@render namedChildren()} </h3>

我们也可以传递一个参数回到这个具名插槽中，来实现更灵活的组件内容渲染。

/src/root.svelte

<script lang="ts">
	import Header from './Header.svelte';
</script>

<Header>
	<h1>默认插槽</h1>

	{#snippet banner({ text })}
		<p>
			{text}
		</p>
	{/snippet}
</Header>

/src/Header.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';

	const {
		children,
		banner
	}: {
		children: Snippet;
		//              在此处使用泛型来定义类型即可,
		//              第一位就是第一个参数和函数是一样的
		banner: Snippet<[{ text: string }]>;
	} = $props();
</script>

{@render children()}

{@render banner({ text: 'This is a banner with text.' })}