响应式 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 组件?
最佳答案
在 slot
标签中传递 prop:
<slot barsMenu={ barsMenu }></slot>
然后在父标签中使用let:
指令:
<NavBar logo="LOGO" let:barsMenu={ barsMenu }>
关于svelte - 从组件和插槽中的组件传递 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58148126/