· SvelteCheckingforslotcontent_Svelte

Svelte Checking for slot content

在某些情况下，您可能希望根据父级是否传入某个插槽的内容来控制组件的某些部分。也许您在该插槽周围有一个包装器，如果插槽为空，您不想渲染它。或者您可能只想在插槽存在时应用一个类。您可以通过检查特殊 $$slots 变量的属性来做到这一点。$$slots 是一个对象，它的键是父组件传入的插槽名称。如果父级将一个插槽留空，则 $$slots 将没有该插槽的条目。请注意，此示例中 <Project> 的两个实例都呈现了一个用于注释的容器和一个通知点，即使只有一个具有注释。我们想使用 $$slots 来确保我们只在父级 <App> 为comments插槽传递内容时才渲染这些元素。在 Project.svelte 中，更新 <article> 上的 class:has-discussion 指令：<article class:has-discussion={$slots.comments}>接下来，将comments插槽及其 <div> 包装在检查 $$slots 的 if 块中：{#if $slots.comments}

<h3>Comments</h3>

</div>

{/if}现在，当 <App> 将comments插槽留空时，comments 容器和 notification 将不会呈现。示例代码App.svelte<script>

import Project from './Project.svelte'

import Comment from './Comment.svelte'

</script>

<style>

h1 {

font-weight: 300;

margin: 0 1rem;

}

ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem;
    display: flex;
}
@media (max-width: 600px) {
    ul {
        flex-direction: column;
    }
}
li {
    padding: 0.5rem;
    flex: 1 1 50%;
    min-width: 200px;}

</style>

<h1>

Projects

</h1>

<ul>

<li>

<Project

title="Add Typescript support"

tasksCompleted={25}

totalTasks={57}

<p>Those interface tests are now passing.</p>

</Comment>

</div>

</Project>

</li>

<li>

<Project

title="Update documentation"

tasksCompleted={18}

totalTasks={21}

</li>

</ul>

Comment.svelte<script>

export let name;

export let postedAt;

$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&amp;rounded=true&amp;background=ff3e00&amp;color=fff&amp;bold=true`;

</script>

<style>

article {

background-color: #fff;

border: 1px #ccc solid;

border-radius: 4px;

padding: 1rem;

}

.header {
    align-items: center;
    display: flex;
}
.details {
    flex: 1 1 auto;
    margin-left: 0.5rem
}
h4 {
    margin: 0;
}
time {
    color: #777;
    font-size: 0.75rem;
    text-decoration: underline;
}
.body {
    margin-top: 0.5rem;
}
.body :global(p) {
    margin: 0;}

</style>

<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>

</div>

</div>

</article>

Project.svelte<script>

export let title;

export let tasksCompleted = 0;

export let totalTasks = 0;

</script>

<style>

article {

border: 1px #ccc solid;

border-radius: 4px;

position: relative;

}

article &gt; div {
    padding: 1.25rem;
}
article.has-discussion::after {
    content: '';
    background-color: #ff3e00;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    height: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    width: 20px;
}
h2,
h3 {
    margin: 0 0 0.5rem;
}
h3 {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
p {
    color: #777;
    margin: 0;
}
.discussion {
    background-color: #eee;
    border-top: 1px #ccc solid;}

</style>

<div>

<h2>{title}</h2>

<p>{tasksCompleted}/{totalTasks} tasks completed</p>

</div>

{#if $slots.comments}

<h3>Comments</h3>

</div>

{/if}

</article>