Итоги

В этом уроке вы узнали, что:

• Компонент может оставить в своём шаблоне место для содержимого от родителя: <slot />. Родитель помещает содержимое между тегами компонента, а Vue показывает его на месте слота. Компонент без слота пропускает содержимое, без предупреждения.
• Содержимое слота принадлежит родителю: оно использует рефы, вычисляемые значения и функции родителя, а также его стили. Оно не видит пропсов и переменных компонента, и <style scoped> компонента его не оформляет.
• То, что лежит между <slot> и </slot>, — запасное содержимое. Оно показывается, когда родитель не дал слоту содержимого или дал такое, которое ничего не показывает, например элемент с ложным v-if.
• У компонента может быть несколько слотов с именами: <slot name="footer" />. Родитель заполняет их через <template #footer>, где #footer — сокращение от v-slot:footer. Содержимое вне такого <template> попадает в слот по умолчанию, тот, что без имени.
• Данные и короткие тексты передают в пропсах, куски страницы — в слотах. У компонентов, которые задают странице форму, таких как панель, карточка или диалог, есть слоты, чтобы их можно было использовать снова с любым содержимым.

В следующем уроке, «Мини-проект: Фотогалерея», вы соберёте вместе компоненты, пропсы, события и слоты в галерее фотографий из поездки.

А пока немного практики: блок с полезной информацией о кафе, InfoBox.vue. Его стили готовы, а шаблон вы напишете сами.