Как добавить несколько новых слотов в один компонент?

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

Шаги по добавлению нескольких слотов

<template>
  <div>
    <h1>Заголовок компонента</h1>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
};
</script>

<template>
  <MyComponent>
    <template v-slot:header>
      <h2>Заголовок из родителя</h2>
    </template>
    
    <template v-slot:content>
      <p>Основное содержание из родителя.</p>
    </template>

    <template v-slot:footer>
      <footer>Подвал из родителя</footer>
    </template>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

Пояснение к коду

• В компоненте MyComponent мы определили три слота — header, content и footer. Каждому из этих слотов соответствует тег <slot name="...">, который указывает на место вставки контента.
• В родительском компоненте мы используем директиву v-slot для указания содержимого каждого из слотов. Директива v-slot:header указывает, что контент внутри этого блока будет вставлен в слот с именем header.

Заключение

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