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.