svelte - 从组件和插槽中的组件传递道具
问题描述
响应式 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 组件?
解决方案
在slot
标签中传递道具:
<slot barsMenu={ barsMenu }></slot>
然后let:
在父标签中使用指令:
<NavBar logo="LOGO" let:barsMenu={ barsMenu }>
推荐阅读
- java - 有没有办法用jdbc在spring boot app中开发动态sql查询?
- android - 阅读android中的特定消息
- vba - 根据excel列表将文件从源文件路径复制到目标文件路径
- glsl - 在 GLSL 顶点着色器中,您可以访问索引缓冲区中顶点的索引,而不仅仅是顶点缓冲区吗?
- mysql - 检查第 2 列的值是否包含在 sql 的第 1 列中
- javascript - Lodash - 如何计算数组中的出现次数
- python - Python 3.8 shared_memory resource_tracker 在应用程序关闭时产生意外警告
- c# - c#Settngs“按钮”提示使用默认打印机,将设置保存到ini文件
- flutter - 我的颤振程序中有一些错误
- javascript - 通过 node.js 从字符串中删除 /