CODEWITHSUNDEEP
svelte
voscausa
voscausa

Reputation: 11706

Passing props from a component and the components in a slot

A responsive NavBar component uses NavLink components like this:

<script>
  import NavBar from './nav/NavBar.svelte';
  import NavLink from './nav/NavLink.svelte';
  let barsMenu = false;
</script>

<NavBar logo="LOGO" bind:barsMenu={barsMenu}>
  <NavLink text="About" barsMenu={barsMenu}></NavLink>
  <NavLink text="Contact" barsMenu={barsMenu}></NavLink>
</NavBar>

The NavLink components require the barsMenu prop. The NavLink components are part of the NavBar slot like this:

<script>
  export let logo = '';
  export let barsMenu = false;
</script>

<div class="navbar" class:responsive="{barsMenu}">
  <a class="logo" href="javascript:;">{logo}</a>
  <slot></slot>
  <a class="bars" href="...." on:click="{() => barsMenu = !barsMenu}">
    <i class="fa fa-bars"></i>
  </a>
</div>

Is it possible for the NavBar component to pass the barsMenu prop straight down the slot to the NavLink components?

Upvotes: 3

Views: 5785

Answers (1)

Shaya Ulman
Shaya Ulman

Reputation: 1651

Pass the prop in the slot tag:

<slot barsMenu={ barsMenu }></slot>

Then use the let: directive in the parent tag:

<NavBar logo="LOGO" let:barsMenu={ barsMenu }>

See the docs

Upvotes: 3

Related Questions