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>

&lt;div class="address"&gt;

&lt;slot name="address"&gt;

&lt;span class="missing"&gt;Unknown address&lt;/span&gt;

&lt;/slot&gt;

&lt;/div&gt;

&lt;div class="email"&gt;

&lt;slot name="email"&gt;

&lt;span class="missing"&gt;Unknown email&lt;/span&gt;

&lt;/slot&gt;

&lt;/div&gt;

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

<span slot="name">

P. Sherman

</span>

&lt;span slot="address"&gt;

42 Wallaby Way&lt;br&gt;

Sydney

&lt;/span&gt;

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

import ContactCard from './ContactCard.svelte';

</script>

<ContactCard>

<span slot="name">

P. Sherman

</span>

&lt;span slot="address"&gt;

42 Wallaby Way&lt;br&gt;

Sydney

&lt;/span&gt;

</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>

&lt;div class="address"&gt;

&lt;slot name="address"&gt;

&lt;span class="missing"&gt;Unknown address&lt;/span&gt;

&lt;/slot&gt;

&lt;/div&gt;

&lt;div class="email"&gt;

&lt;slot name="email"&gt;

&lt;span class="missing"&gt;Unknown email&lt;/span&gt;

&lt;/slot&gt;

&lt;/div&gt;

</article>