Svelte Slot 属性
在当前程序中,我们有一个名为 <Hoverable>的组件来跟踪鼠标是否放在上面,它需要将数据传回父组件,以便我们可以渲染插入的内容。为此,我们使用 插槽属性(slot props)。将Hoverable.svelte的hovering的值传递给它的slot:<div on:mouseenter={enter} on:mouseleave={leave}>
<slot hovering={hovering}></slot>
</div>请记住,你可以使用{hovering} 这种速记写法。然后我们使用let来暴露<Hoverable> 组件内的内容:<Hoverable let:hovering={hovering}>
<div class:active={hovering}>
{#if hovering}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
</Hoverable>如果你想在其父组件中调用active, 你也可以给该变量重命名,<Hoverable let:hovering={active}>
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
</Hoverable>你可以根据需要拥有任意数量的组件,并在组件内部声明插槽属性。命名插槽也拥有有属性,但是let指令需要写在 slot="..." 标签上而不是组件上。示例代码App.svelte<script>
import Hoverable from './Hoverable.svelte';
</script>
<style>
div {
padding: 1em;
margin: 0 0 1em 0;
background-color: #eee;
}
.active { background-color: #ff3e00;
color: white;
}
</style>
<Hoverable let:hovering={active}>
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
</Hoverable>
<Hoverable let:hovering={active}>
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
</Hoverable>
<Hoverable let:hovering={active}>
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
</Hoverable>Hoverable.svelte<script>
let hovering;
function enter() { hovering = true;
}
function leave() {
hovering = false;
}
</script>
<div on:mouseenter={enter} on:mouseleave={leave}>
<slot hovering={hovering}></slot>
</div>