¿Qué son los slots y los scoped slots?

Question

Accepted Answer

**Slots** permiten que un componente padre pase **contenido de template** a un componente hijo — son la forma de construir wrappers flexibles y reutilizables (tarjetas, modales, layouts) donde el consumidor controla el markup interno. ## Slot básico ```vue ``` ```vue

Title

Any content!

``` El hijo define un "agujero" (``); el padre lo rellena con el markup que desee. Esto es mucho más flexible que pasar strings mediante props. ## Slots con nombre — múltiples puntos de inserción ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — el hijo pasa datos ARRIBA al contenido del slot A veces el hijo tiene datos que el slot del padre necesita (por ejemplo, cada item en una lista). **Los scoped slots** exponen datos del hijo al template del padre: ```vue ``` ```vue ``` Los scoped slots son la clave para **componentes renderless/headless**: el hijo maneja la lógica (bucles, fetching, estado) y permite que el padre controle completamente la presentación. ## Por qué es importante Los slots son el mecanismo de distribución de contenido de Vue — esencial para componentes de layout y wrapper reutilizables. Los slots con nombre proporcionan múltiples puntos de inserción, y los scoped slots (exponiendo datos del hijo al template definido por el padre) habilitan patrones poderosos como componentes headless y listas/tablas personalizables. Son lo que hace que los componentes de Vue sean composicionales en lugar de rígidos.