Что такое scoped slots во Vue

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

Пример:

<!-- Дочерний компонент -->
<template>
  <div>
    <slot :item="item" :index="index"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: { name: 'Vue' },
      index: 1
    }
  }
}
</script>

<!-- Родительский компонент -->
<child-component>
  <template v-slot:default="slotProps">
    {{ slotProps.item.name }} - {{ slotProps.index }}
  </template>
</child-component>

Ключевые моменты:

• Данные передаются через атрибуты в <slot>
• В родителе доступ через v-slot (можно сократить до #default)
• Можно деструктурировать props: v-slot="{ item, index }"
• Позволяет создавать гибкие компоненты (например, для таблиц, списков)