Какова цель нового директивы slot?

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

Основные понятия

С помощью slot вы можете:

Пример использования

Вот простой пример использования slot в компонентах Vue.

Шаг 1. Создание компонента BaseCard

Создадим компонент BaseCard, который будет использовать слот для вставки контента.

<template>
  <div class="base-card">
    <h2>Заголовок карты</h2>
    <slot></slot> <!-- Здесь будет вставлен контент из родительского компонента -->
  </div>
</template>

<script>
export default {
  name: 'BaseCard'
}
</script>

<style scoped>
.base-card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
</style>

Шаг 2. Использование компонента BaseCard в родительском компоненте

Теперь мы можем использовать BaseCard в родительском компоненте и вставить в него контент:

<template>
  <div>
    <BaseCard>
      <p>Это содержимое, которое будет отображаться внутри карты.</p>
    </BaseCard>
    <BaseCard>
      <p>Другой контент для другой карты.</p>
    </BaseCard>
  </div>
</template>

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

export default {
  components: {
    BaseCard
  }
}
</script>

Шаг 3. Результат

При рендеринге этого кода вы получите две карты, каждая из которой содержит свой уникальный контент.

Использование именованных слотов

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

Пример с именованными слотами:

<template>
  <div class="base-card">
    <h2>Заголовок карты</h2>
    <slot name="content"></slot> <!-- Именованный слот -->
    <slot name="footer"></slot>   <!-- Другой именованный слот -->
  </div>
</template>

А использование будет выглядеть так:

<BaseCard>
  <template v-slot:content>
    <p>Контент для карты</p>
  </template>
  <template v-slot:footer>
    <button>Кнопка в подвале</button>
  </template>
</BaseCard>

Заключение

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