# 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
5 месяцев назад
Насколько часто используются slots на практике?
monsterlessons
5 месяцев назад
Достаточно часто. Как только нужно передать инициализированный компонент в компонент, например. <slider> <arrow some-props='some-props'/> </slider
Moe Green
5 месяцев назад
Забавно - у меня на памяти также крутился только один пример использования slots - это слайдеры или карусели )) На YouTube есть француз с серией очень хороших практических примеров на Vue.js, и Carousel + Slots - в частности. Единственное видео, где лично я видел применение slots вживую )) А вообще Вы хорошо обрисовали, что такое slots. Если честно - я до конца не понимал их (или сразу забывал).
monsterlessons
5 месяцев назад
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
5 месяцев назад
Мда... Видно мне придется посерьезнее отнестись к вопросу об изучении React.js )
monsterlessons
5 месяцев назад
Имхо React заставляет писать в одном вее, и при этом дает огромные возможности из-за jsx. Ну и плюс самый популярный фреймворк сейчас, чтобы найти работу. P.S. кстати в Ng5 такие же проблемы, как и в Vue так как такой же псевдо html.
Moe Green
5 месяцев назад
Да, у React.js с работой все хорошо. ) Кстати, по поводу изучения React - может быть Вы знаете такие ресурсы или что-то похожее. Для новичка задания практические, от малого к большому, по нарастающей, для изучения на практике. Также же быстрее и лучше изучать, когда что-то делаешь.
monsterlessons
5 месяцев назад
Ресурсов таких не знаю. Я всегда советую браться и писать проект. Например блог или что-то подобное. Каждый раз, когда непонятно что делать - гуглить. Так и нарабатывается быстро нормальный опыт.
Сергей Китченков
4 месяцев назад
Устроился на работу как React разработчик(junior), и первый реальный проект пришел на Vue. Теперь учу его. Ваши видео очень помогают) Спасибо
monsterlessons
4 месяцев назад
Отлично! Желаю удачи в работе и обучении. С Vue повезло вам - пока не очень много проектов на нем пишут.
Moe Green
3 месяцев назад
хорошо! вот и пригодились мне на практике slots! ))
Moe Green
3 месяцев назад
присоединяюсь к автору - действительно подфартило, ибо на Vue правда мало работы. )