Svelte 5/SvelteKit：如何向{@render children()}传递Props

在Svelte 5中，通过{@render children()}给子组件传递props，核心是父组件传递props给children渲染函数，插槽内容以函数形式接收props并传递给子组件，具体实现如下：

1. 父组件（Parent.svelte） #

定义要传递的props，通过children()传入：

<script lang="ts">
	// 示例值，可根据业务调整
	let parentValue = "来自父组件的消息";
</script>

{@render children({ prop: parentValue })}

2. 使用父组件时（如App.svelte） #

将子组件包裹在父组件的插槽中，以函数形式接收父组件传递的props，再传递给子组件：

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

<Parent>
	{/* 接收父组件传来的props，再传给Child */}
	{({ prop }) => <Child prop={prop} />}
</Parent>

3. 子组件（Child.svelte） #

通过$props()解构接收传递来的props：

<script lang="ts">
	let { prop } = $props();
</script>

<p>子组件接收到的props：{prop}</p>

原代码无法运行的原因 #

原写法中，父组件传递了props给children()，但插槽中的子组件没有以函数形式接收这些props，导致父组件的props无法传递到子组件中。必须通过函数式插槽的方式，将父组件传递的props中转给子组件。

内容的提问来源于stack exchange，提问作者TheJof