В предыдущем видео мы с вами разобрали как использовать slots, чтобы передавать html внутрь компонентов. Но что делать, если мы хотим передать два разных куска html в один компонент? Например, мы хотим передать title и description в наш alert компонент, как html код.
В этом нам помогут named slots. То есть слоты, в которых мы задаем имя. Для этого достаточно добавить к рутовому элементу html кода аттрибут slot.
App.vue
<alert>
<div slot='title'>
<b>This is</b> {{message}}
</div>
<div slot='description'>
This is our description
</div>
</alert>
В нашем случае мы указали у дивов атрибут slot, как title и description. Теперь, мы можем использовать эти именованые слоты внутри компонента Alert, чтобы отрендерить разные части html.
Для этого достаточно использовать в html разметке элемент slot, как мы уже делали ранее, но указать у него атрибут name.
Alert.vue
<slot name='title'/>
<slot name='description'/>
Мы можем добавить немного стилей, чтобы сделать наш алерт более читаемым.
Alert.vue
<div class='alert success'>
<div class='title'>
<slot name='title'/>
</div>
<slot name='description'/>
<slot />
</div>
Alert.vue
<style scoped>
...
.title {
font-size: 20px;
}
</style>
То есть, мы просто обернули наш слот в дополнительный div и навесили на него класс.
Также, иногда полезно использовать слот по умолчанию. Весь html у которого мы не указываем name считается слотом по умолчанию. И без разницы в какой последовательности вы напишете html.
App.vue
<alert>
<div>
Top default slot
</div>
<div slot='title'>
<b>This is</b> {{message}}
</div>
<div slot='description'>
This is our description
</div>
<div>
Default slot
</div>
</alert>
Здесь мы написали 2 дополнительных дива сверху и снизу без атрибута name. Они будут отрендерены вместе, как слот по умолчанию.
Давайте добавим теперь slot в Alert.
Alert.vue
<div class='alert success'>
<div class='title'>
<slot name='title'/>
</div>
<slot name='description'/>
<slot />
</div>
Как мы видим в браузере, у нас отрендерился слот по умолчанию, собрав в себя весь html без поля name.
Для чистоты кода и понимания я рекомендую всегда использовать либо named slots либо один slot и не смешивать их.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.