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

Обычные слоты позволяют вставлять произвольный HTML или компоненты внутрь дочернего компонента:

<ChildComponent>
  <p>Контент для слота</p>
</ChildComponent>

В дочернем компоненте:

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

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return { user: { name: 'Иван', age: 30 } };
  }
}
</script>

В родительском компоненте:

<ChildComponent v-slot:default="slotProps">
  <p>Имя: {{ slotProps.user.name }}</p>
  <p>Возраст: {{ slotProps.user.age }}</p>
</ChildComponent>

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

Расскажи про слоты во Vue: как использовала, в том числе scoped slots?