从组件和插槽中的组件传递道具答案

【问题标题】：Passing props from a component and the components in a slot从组件和插槽中的组件传递道具
【发布时间】：2019-09-28 16:12:22
【问题描述】：

响应式 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 组件需要 barMenu 属性。 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 组件是否可以将 barMenu 属性直接从插槽向下传递到 NavLink 组件？

【问题讨论】：

标签： svelte

【解决方案1】：

在slot标签中传递prop：

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

然后在父标签中使用let:指令：

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

See the docs

【讨论】：

谢谢。我错过了 : 之后 let:... 之前。