# Named slots в Vue

poster
В этом видео мы с вами разберем, как передать несколько отдельных кусков html в компонент с помощью named slots.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В предыдущем видео мы с вами разобрали как использовать 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 и не смешивать их.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Moe Green
6 лет назад
вопрос немного не по теме и даже немного провокационный, но тем не менее насущный и правильный - Вы верите в светлое будущее Vue? )
monsterlessons
6 лет назад
Думаю работа на нем будет появляться. Но что он станет популярнее Реакта или Ангуляра - это вряд ли. Сам я продакшен приложения для себя на нем не делал бы - я предпочитаю самописный React.
Moe Green
6 лет назад
Благодарю! Я спрашиваю так потому, что я начинал с Vue и он мне нравится. Но вот что касается продакшен - тут я прихожу к такой же мысли, которую высказали Вы. У Vue не будет таких горизонтов, какие уже сейчас имеются у React. Я начинал переход на React - учу и пробую что-то делать. На удивление (для меня), это делать труднее, чем на Vue. В дополнение - меня привлекает тема "мобильных" или гибридных приложений на JS. И тут лидер React Native, конечно же.
monsterlessons
6 лет назад
Зависит от того, зачем вам Vue. Если для поиска работы, то React/AngularJS/Angular5/Backbone. Если писать свой проект, то уже дело вкуса. Если вам для этого хорошо Vue заходит, то почему нет. С React Native тоже самое, фронтендщик обычно его не трогает, а пишет только веб версию (если в компании). Если для себя, то конечно да.
Moe Green
6 лет назад
Да, для поиска работы конечно же. На том же фрилансе работы по React/ReactNative намного больше, нежели по Vue.