Using Svelte 5 and SvelteKit, I need to pass props to a child while this child is integrated to its parent using {@render children()}
.
I don't understand how I am supposed to pass props and get them in the child.
The following is not working but it illustrates what I want to do:
// Parent
{@render children({prop: value})}
// Child
let { prop } = $props()
Can someone tell me how to do this?
Layouts and pages in SvelteKit cannot pass properties like that.
Properties of components are separate from snippets arguments. You can only receive component properties from an instantiation of a component (<Component prop={...}>
). SvelteKit is doing the component instantiation and any properties passed in {@render children()}
will not be passed along to the component.
You can have some communication between layouts and child layouts/pages via contexts, though. This way you could also introduce custom slots as shown here, these could also receive arguments in the {#snippet}
definitions.
Since you mentioned that something needs to be reloaded in the parent:
If data is loaded via load
functions, you can cause these to reload via invalidate
/invalidateAll
.