SvelteNamedslots

Svelte Named slots

上一章节使用了一个默认插槽（default slot），该slot直接在组件内显示，有时候你需要对子级进行细分设置，就如这个<ContactCard>。在这种情况下，我们可以使用 命名插槽（named slots）。在ContactCard.svelte中，给每个标签添加name属性：<article class="contact-card">

<h2>

<slot name="name">

<span class="missing">Unknown name</span>

</slot>

</h2>

<div class="address">
    <slot name="address">
        <span class="missing">Unknown address</span>
    </slot>
</div>
<div class="email">
    <slot name="email">
        <span class="missing">Unknown email</span>
    </slot>
</div>

</article>然后把 slot="..." 添加到 <ContactCard> 标签内：<ContactCard>

<span slot="name">

P. Sherman

</span>

<span slot="address">
    42 Wallaby Way<br>
    Sydney
</span>

</ContactCard>示例代码App.svelte<script>

import ContactCard from './ContactCard.svelte';

</script>

<ContactCard>

<span slot="name">

P. Sherman

</span>

<span slot="address">
    42 Wallaby Way<br>
    Sydney
</span>

</ContactCard>ContactCard.svelte<style>

.contact-card {

width: 300px;

border: 1px solid #aaa;

border-radius: 2px;

box-shadow: 2px 2px 8px rgba(0,0,0,0.1);

padding: 1em;

}

h2 {
    padding: 0 0 0.2em 0;
    margin: 0 0 1em 0;
    border-bottom: 1px solid #ff3e00
}
.address, .email {
    padding: 0 0 0 1.5em;
    background:  0 0 no-repeat;
    background-size: 20px 20px;
    margin: 0 0 0.5em 0;
    line-height: 1.2;
}
.address { background-image: url(tutorial/icons/map-marker.svg) }
.email   { background-image: url(tutorial/icons/email.svg) }
.missing { color: #999 }

</style>

<article class="contact-card">

<h2>

<slot name="name">

<span class="missing">Unknown name</span>

</slot>

</h2>

<div class="address">
    <slot name="address">
        <span class="missing">Unknown address</span>
    </slot>
</div>
<div class="email">
    <slot name="email">
        <span class="missing">Unknown email</span>
    </slot>
</div>

</article>