Для чего в Vue используются слоты и как они работают?

Слоты во Vue используются для внедрения контента в компоненты извне. Это позволяет создавать гибкие и переиспользуемые компоненты.

Есть три типа слотов:

• Слоты по умолчанию (Default Slots): Используются для вставки основного контента.

  <template>
    <div>
      <slot></slot>
    </div>
  </template>
  

  Использование:

  <my-component>
    <p>Этот контент будет вставлен в слот по умолчанию.</p>
  </my-component>
  

• Именованные слоты (Named Slots): Позволяют вставлять контент в конкретные слоты внутри компонента, отличающиеся по имени.

  <template>
    <div>
      <slot name="header"></slot>
      <div>Основной контент компонента</div>
      <slot name="footer"></slot>
    </div>
  </template>
  

  Использование:

  <my-component>
    <template v-slot:header>
      <h2>Заголовок</h2>
    </template>
    <template v-slot:footer>
      <p>Футер</p>
    </template>
  </my-component>
  

  Сокращенный синтаксис для v-slot:

  <my-component>
    <template #header>
      <h2>Заголовок (сокращенный синтаксис)</h2>
    </template>
  </my-component>
  

• Слоты с ограниченной областью видимости (Scoped Slots): Позволяют дочернему компоненту передавать данные родительскому компоненту через слот. Родительский компонент может использовать эти данные при рендеринге контента слота.

  <template>
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item" :index="index"></slot>
      </li>
    </ul>
  </template>
  
  

  Использование:

  <my-list :items="['Apple', 'Banana', 'Orange']">
    <template v-slot:default="slotProps">
      {{ slotProps.index + 1 }}. {{ slotProps.item }}
    </template>
  </my-list>
  
  

  Деструктуризация slotProps:

  <my-list :items="['Apple', 'Banana', 'Orange']">
    <template v-slot="{ item, index }">
      {{ index + 1 }}. {{ item }} (Деструктуризация)
    </template>
  </my-list>
  

Слоты работают, создавая "места" внутри шаблона дочернего компонента, куда родитель может вставить свой собственный контент. При рендеринге, Vue заменяет тег <slot> (или <slot name="...">) на контент, предоставленный родительским компонентом. В случае scoped slots, данные из дочернего компонента доступны через объект аргумента шаблона слота в родительском компоненте.