# Slots в Vue

06:45
poster
В этом видео мы с вами разберем, что такое slots в Vue.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом видео мы с вами разберем, что такое slots в Vue.

Иногда нам необходимо прокинуть в компонент не переменную, а html код. Например представим, что нам нужно написать компонент alert, которым мы будем переиспользовать в разных местах приложени. И мы должны его реализовать так, чтобы было возможно прокидывать туда не только текст, но и html.

Давайте попробуем. У меня создан пустой проект webpack-simple с помощью vue-cli.

Давайте добавим Alert компонент.

Alert.vue

<template>
  <div class='alert success'>
    This is some success text
  </div>
</template>

То есть тут у нас только div с двумя классами. Давайте добавим стилей.

Alert.vue

<style scoped>
  .alert {
    padding: 12px 20px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-size: 16px;
  }

  .success {
    background-color: #dff0d8;
    border-color: #d0e9c6;
    color: #3c763d;
  }
</style>

Мы также добавили scoped, чтобы наши стили в компоненте были уникальными. Теперь мы должны импортировать этот компонент в App.

App.vue

import alert from './Alert.vue'
...
export default {
  components: {
    alert
  }
}

App.vue

<template>
  <div>
    <h1>Hello Vue!</h1>
    <alert />
  </div>
</template>

Если мы посмотрим в браузер, то у нас вывелся красивый зеленый алерт, который мы можем переиспользовать в разным местах приложения, так как его ширина всегда занимает весь контейнер.

Давайте теперь добавим возможно указывать текст алерта. Для этого используем props, как мы делали ранее.

Alert.vue

<div class='alert success'>
  {{text}}
</div>
export default {
  props: ['text']
}

Мы добавили props и теперь можем просто прокинуть текст снаружи.

App.vue

<alert text='This is our success message' />

Все работает, но что, если мы хотим передать html снаружи? Например, мы хотим, чтобы часть нашего текста была жирной. Для этого в Vue есть такое понятие, как slot. Мы можем написать текст внутри нашего компонента при вызове и он нам будет доступен для использования внутри.

Давайте попробуем

App.vue

<alert>
  <b>This is</b> our success message
</alert>

Мы просто написали html внутри вызова компонента. Ничего больше. Теперь, чтобы получить этот html внутри компонента мы можем использовать специальный тег slot.

<div class='alert success'>
  <slot />
</div>

Мы просто используем его, где нам нужно. Нам не нужны для этого props или что-то еще. Если мы посмотрим в браузер, то у нас отрендерился текст и часть этого текста выделена жирным.

Что насчет переменных? Что будет, если мы напишем внутри не текст а переменную? Должна ли она тогда быть определена внутри компонента или снаружи? Давайте перенесем наш текст в переменную.

App.vue

<alert>
  <b>This is</b> {{message}}
</alert>
data () {
  return {
    message: 'our success message'
  }
}

Если мы посмотрим в браузер, то все по прежнему работает. Это означает, что шаблон транспайлится до того, как прокидывается в компонент. То есть компонент получает чистый html после выполнения всей логики.

Что насчет стилей? Можем ли мы стайлить компонент снаружи?

App.vue

<style scoped>
  ...
  b {
    color: red;
  }
</style>

Как мы видим, стили можно применять снаружи. Но мы можем эти стили перебить внутри компонента.

Alert.vue

<style scoped>
  ...
  b {
    color: blue;
  }
</style>

Как мы видим, теперь наш жирный текст синего цвета. Что означает, что стили в компоненте всегда побеждают.

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Moe Green
19 дней назад
Насколько часто используются slots на практике?
monsterlessons
18 дней назад
Достаточно часто. Как только нужно передать инициализированный компонент в компонент, например. <slider> <arrow some-props='some-props'/> </slider
Moe Green
18 дней назад
Забавно - у меня на памяти также крутился только один пример использования slots - это слайдеры или карусели )) На YouTube есть француз с серией очень хороших практических примеров на Vue.js, и Carousel + Slots - в частности. Единственное видео, где лично я видел применение slots вживую )) А вообще Вы хорошо обрисовали, что такое slots. Если честно - я до конца не понимал их (или сразу забывал).
monsterlessons
18 дней назад
Slots по факту костыль, чтобы заменить отсутствие jsx. В React я могу писать const arrow = <Arrow size='large'> const slider = ( <slider> <arrow/> Some content <arrow/> </slider> ) Причем я могу передать arrow даже как атрибут <slider arrow={arrow}/> В Vue из-за того, чтобы это подобие html придумываются костыли в виде named slots , которые вообще не такие гибкие, так как являются просто компонентом.
Moe Green
18 дней назад
Мда... Видно мне придется посерьезнее отнестись к вопросу об изучении React.js )
monsterlessons
18 дней назад
Имхо React заставляет писать в одном вее, и при этом дает огромные возможности из-за jsx. Ну и плюс самый популярный фреймворк сейчас, чтобы найти работу. P.S. кстати в Ng5 такие же проблемы, как и в Vue так как такой же псевдо html.
Moe Green
18 дней назад
Да, у React.js с работой все хорошо. ) Кстати, по поводу изучения React - может быть Вы знаете такие ресурсы или что-то похожее. Для новичка задания практические, от малого к большому, по нарастающей, для изучения на практике. Также же быстрее и лучше изучать, когда что-то делаешь.
monsterlessons
17 дней назад
Ресурсов таких не знаю. Я всегда советую браться и писать проект. Например блог или что-то подобное. Каждый раз, когда непонятно что делать - гуглить. Так и нарабатывается быстро нормальный опыт.
Сергей Китченков
4 дней назад
Устроился на работу как React разработчик(junior), и первый реальный проект пришел на Vue. Теперь учу его. Ваши видео очень помогают) Спасибо
monsterlessons
4 дней назад
Отлично! Желаю удачи в работе и обучении. С Vue повезло вам - пока не очень много проектов на нем пишут.