Содержание

1. Давайте попробуем разобраться, что же такое slot.

2. Для чего же тогда этот элемент нам нужен?

При работе с компонентами Vue, рано или поздно вам придется столкнуться с таким понятием как слот (slot). Давайте разберемся для чего это нужно и что это такое.

Особенно часто со слотами можно встретиться если вы будете работать с какими-то сторонними библиотеками, написанными на Vue. Часто там используется такой подход, что в компонентах используются слоты.

Давайте попробуем разобраться, что же такое slot.

Предположим, что у нас есть следующий родительский компонент:

<template>

<div>

<ChildComponent></ChildComponent>

</div>

</template>




<script>

import ChildComponent from "@/components/ChildComponent.vue";




export default {

  name: "TestComponent.vue",

  components: {ChildComponent},

  data() {},

  created() {},

  methods: {},

  computed: {}

}

</script>

В этот родительский компонент мы вставляем дочерний компонент ChildComponent и его содержимое достаточно простое. 

<template>

    <div>

        <h1>Заголовок компонента</h1>

        <slot></slot>

    </div>

</template>




<script>

export default {

  props: {},

  data() {}

}

</script>

В нем есть новый для нас элемент <slot></slot>. Если посмотреть DOM разметку документа, то элемент slot просто никак не выводится.

Для чего же тогда этот элемент нам нужен?

Благодаря элементу slot мы формируем специальную область в дочернем компоненте, в которую мы можем что-то вставлять из родительского компонента. 

Т.е. слот - это область для вставки данных из родительского компонента.

Как же мы можем вставить данные в эту область?

В нашем случае мы можем изменить вставку ChildComponent примерно так:

<ChildComponent>Текст</ChildComponent>

Т.е. между открывающим и закрывающими тэгами мы вставляем произвольный текст. И этот текст выводится в нашем компоненте на месте расположения элемента slot.

Кроме того, мы можем даже написать внутри html-разметку и она успешно будет выведена.

<ChildComponent><p>Текст</p></ChildComponent>

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

Теперь мы можем взять наш ChildComponent и использовать его много раз с разными значениями. 

<ChildComponent><p>Текст 1</p></ChildComponent>
<ChildComponent><p>Текст 2</p></ChildComponent>
<ChildComponent><p>Текст 3</p></ChildComponent>

Теперь из родительского элемента мы можем легко задавать содержимое блока slot для дочерних компонентов. 

Это основы работы со слотами во Vue, но здесь есть еще много особенностей, которые, надеюсь, мы с вами разберем в следующих уроках.