Как использовать слоты в Vue.js?

@brooklyn 

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

Для использования слотов в Vue.js вам нужно определить слот в родительском компоненте и заполнить его содержимым в дочернем компоненте. Вот простой пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<!-- Родительский компонент -->
<template>
  <div>
    <h1>Заголовок</h1>
    <slot></slot>
  </div>
</template>

<!-- Дочерний компонент -->
<template>
  <div>
    <parent-component>
      <p>Контент</p>
    </parent-component>
  </div>
</template>

В этом примере родительский компонент имеет слот, помеченный тегом slot. Контент, переданный в слот, будет отображаться на странице вместе с заголовком. Дочерний компонент содержит родительский компонент и заполняет его слот тегом p.

Вы также можете определить именованные слоты, если нужно передать контент в конкретное место родительского компонента. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- Родительский компонент -->
<template>
  <div>
    <h1>Заголовок</h1>
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<!-- Дочерний компонент -->
<template>
  <div>
    <parent-component>
      <template v-slot:content>
        <p>Контент</p>
      </template>
      <template v-slot:footer>
        <p>Футер</p>
      </template>
    </parent-component>
  </div>
</template>

В этом примере родительский компонент содержит два именованных слота: content и footer. Дочерний компонент использует директиву v-slot для передачи контента в каждый слот.

В итоге, использование слотов в Vue.js позволяет создавать гибкие и переиспользуемые компоненты, которые могут принимать и отображать различный контент, передаваемый из родительского компонента.