sveltesveltekit

Passing props to `{@render children()}`


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?


Solution

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