Как реализуются слоты во Vue и для чего нужны scoped-slots?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Основные слоты

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

Пример:

<!-- Родительский компонент -->
<template>
  <my-component>
    <p>Это содержимое будет вставлено в слот.</p>
  </my-component>
</template>
​
<!-- Дочерний компонент -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

• В родительском компоненте <my-component> используется для оборачивания содержимого, которое будет передано в дочерний компонент.
• В дочернем компоненте <slot></slot> указывает место, куда будет вставлено переданное содержимое.

Именованные слоты

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

Пример:

<!-- Родительский компонент -->
<template>
  <my-component>
    <template v-slot:header>
      <h1>Заголовок</h1>
    </template>
    <template v-slot:footer>
      <p>Футер</p>
    </template>
  </my-component>
</template>
​
<!-- Дочерний компонент -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

• В родительском компоненте используются v-slot:header и v-slot:footer для передачи содержимого в соответствующие слоты.
• В дочернем компоненте <slot name="header"></slot> и <slot name="footer"></slot> определяют, куда будет вставлено содержимое.

Scoped-slots

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

Пример:

<!-- Родительский компонент -->
<template>
  <my-component>
    <template v-slot:default="slotProps">
      <p>Данные из дочернего компонента: {{ slotProps.data }}</p>
    </template>
  </my-component>
</template>
​
<!-- Дочерний компонент -->
<template>
  <div>
    <slot :data="internalData"></slot>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      internalData: 'Пример данных'
    };
  }
};
</script>

• В дочернем компоненте <slot :data="internalData"></slot> передает internalData в родительский компонент через слот.
• В родительском компоненте v-slot:default="slotProps" используется для получения данных из дочернего компонента. slotProps.data содержит переданные данные.

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