Is there any way to pass a prop to slot in svelte?

Viewed 1643

I have a parent component with a slot, and a child component put into the parent as a slot.

I want to pass a prop "gutter" to the child component through parent component.

Is there any way to do this without context and store?

All I want is like this. The parent component: ParentComp.svelte

<script>
    export let gutter = 0;
</script>

<div>
    <slot gutter={gutter}></slot>
</div>

The child component: ChildComp.svelte

<script>
    export let gutter = 0;
</script>

<div>
    gutter is: {gutter}
    <slot></slot>
</div>

App.svelte

<script>
    import ParentComp from './ParentComp.svelte'
    import ChildComp from './ChildComp.svelte'
</script>

<ParentComp gutter=10>
    <ChildComp>
        <ParentComp gutter=8>
            <ChildComp></ChildComp>
        </ParentComp>
    </ChildComp>
</ParentComp>

Actually, what I am doing is to make layout components with a row component(Parent) and a column component(child). I want to control the gutter prop of row and column in with single variable.

I can't use the context or store to do this, because sometimes there is a row in the column.

1 Answers

I tried to use Svelte context, and this can solve my problem!!!! I should not exclude the context in my question, Sorry, it's my mistake.

I made a sample here, and the context works well. Sample

Related