Запасное содержимое

Пустой заказ показывает только Итого: €0 и кнопку, которой нечего очищать. Короткое сообщение было бы дружелюбнее, и панель может принести его с собой. То, что вы напишете между <slot> и </slot>, — это запасное содержимое слота: оно показывается, когда родитель не дал слоту содержимого.

<template>
    <section class="panel">
        <h2>{{ title }}</h2>
        <slot>
            <p>Пока здесь пусто.</p>
        </slot>
    </section>
</template>

<Panel title="Новости" />
<Panel title="Часы работы">
    <p>Каждый день с 7:00 до 19:00.</p>
</Panel>

У панели «Новости» нет содержимого, поэтому она показывает Пока здесь пусто. Панель с часами работы показывает свой абзац, а её запасного содержимого на странице нет вообще.

Содержимое, которое ничего не показывает, считается отсутствием содержимого. Если у всего, что лежит между тегами, есть v-if с ложным условием, слот пуст, и показывается запасное содержимое. Несколько элементов могут делить один v-if в <template v-if>, как вы знаете из урока «Условия и списки»:

<Panel title="Ваш заказ">
    <template v-if="order.length > 0">
        <ul>
            ...
        </ul>
        <p>Итого: €{{ total }}</p>
    </template>
</Panel>

Пока заказ пуст, панель говорит Пока здесь пусто. Как только в нём что-то появляется, панель показывает список и сумму.

Типичная ошибка: самозакрывающийся <slot /> и текст после него, например <slot /><p>Пока здесь пусто.</p>. Тогда абзац — обычная часть панели, и он показывается всегда, под содержимым.