Передача реквизита от компонента и компонентов в слоте - PullRequest
Новая
       7

Передача реквизита от компонента и компонентов в слоте

1 голос
/ 28 сентября 2019

Отзывчивый компонент NavBar использует компоненты NavLink, например: 

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

Для компонентов NavLink требуется поддержка barsMenu.Компоненты NavLink являются частью слота NavBar следующим образом: 

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

Возможно ли для компонента NavBar передать команду barsMenu прямо вниз через слот к компонентам NavLink?

1 Ответ

1 голос
/ 28 сентября 2019

Это то, как вы можете передать слот реквизит в Svelte: 

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

Затем используйте директиву let : 

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