¿Para qué se utilizan los slots en Vue y cómo…

Los slots en Vue se utilizan para insertar contenido desde fuera en componentes. Esto permite crear componentes flexibles y reutilizables.

Hay tres tipos de slots:

Slots por defecto (Default Slots): Se usan para insertar contenido principal.

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

Uso:

<mi-componente>
  <p>Este contenido será insertado en el slot por defecto.</p>
</mi-componente>

Slots nombrados (Named Slots): Permiten insertar contenido en slots específicos dentro del componente, diferenciados por nombre.

<template>
  <div>
    <slot name="header"></slot>
    <div>Contenido principal del componente</div>
    <slot name="footer"></slot>
  </div>
</template>

Uso:

<mi-componente>
  <template v-slot:header>
    <h2>Título</h2>
  </template>
  <template v-slot:footer>
    <p>Pie de página</p>
  </template>
</mi-componente>

Sintaxis abreviada para v-slot:

<mi-componente>
  <template #header>
    <h2>Título (sintaxis abreviada)</h2>
  </template>
</mi-componente>

Slots con ámbito limitado (Scoped Slots): Permiten que el componente hijo pase datos al componente padre a través del slot. El componente padre puede usar estos datos al renderizar el contenido del slot.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

Uso:

<mi-list :items="['Manzana', 'Banana', 'Naranja']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</mi-list>

Desestructuración de slotProps:

<mi-list :items="['Manzana', 'Banana', 'Naranja']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Desestructuración)
  </template>
</mi-list>

Los slots funcionan creando "lugares" dentro de la plantilla del componente hijo, donde el padre puede insertar su propio contenido. Al renderizar, Vue reemplaza la etiqueta <slot> (o <slot name="...">) por el contenido proporcionado por el componente padre. En el caso de los slots con ámbito, los datos del componente hijo están disponibles a través del objeto de argumentos de la plantilla del slot en el componente padre.

¿Para qué se utilizan los slots en Vue y cómo funcionan?