SvelteSlot属性

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>