El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En Vue.js, los slots son una poderosa característica que permite a los desarrolladores crear componentes más flexibles y reutilizables. Los slots permiten que los componentes padres inserten contenido en los componentes hijos, lo que facilita la creación de interfaces de usuario dinámicas y personalizables.

Conceptos Clave

Slot Básico: Permite insertar contenido en un componente hijo desde el componente padre.
Slot Nombrado: Permite definir múltiples áreas de contenido en un componente hijo, cada una con un nombre específico.
Slot Scoped: Permite pasar datos del componente hijo al contenido del slot en el componente padre.

Slot Básico

Ejemplo

<!-- Componente Hijo: MyComponent.vue -->
<template>
  <div class="my-component">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<!-- Componente Padre -->
<template>
  <div>
    <my-component>
      <p>Este es el contenido del slot básico.</p>
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

Explicación

En MyComponent.vue, el <slot></slot> actúa como un marcador de posición para el contenido que se insertará desde el componente padre.
En el componente padre, el contenido dentro de <my-component> se inserta en el slot del componente hijo.

Slot Nombrado

Ejemplo

<!-- Componente Hijo: MyComponent.vue -->
<template>
  <div class="my-component">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<!-- Componente Padre -->
<template>
  <div>
    <my-component>
      <template v-slot:header>
        <h1>Encabezado</h1>
      </template>
      <p>Este es el contenido principal.</p>
      <template v-slot:footer>
        <p>Pie de página</p>
      </template>
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

Explicación

En MyComponent.vue, se definen tres slots: uno sin nombre (contenido principal), uno para el encabezado (name="header") y uno para el pie de página (name="footer").
En el componente padre, se utiliza la directiva v-slot para especificar el contenido de cada slot nombrado.

Slot Scoped

Ejemplo

<!-- Componente Hijo: MyComponent.vue -->
<template>
  <div class="my-component">
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 30
      }
    }
  }
}
</script>

<!-- Componente Padre -->
<template>
  <div>
    <my-component v-slot:default="slotProps">
      <p>Nombre: {{ slotProps.user.name }}</p>
      <p>Edad: {{ slotProps.user.age }}</p>
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

Explicación

En MyComponent.vue, el slot se define con un objeto user que se pasa como propiedad del slot (:user="user").
En el componente padre, se utiliza v-slot:default="slotProps" para acceder a las propiedades del slot y utilizarlas en el contenido del slot.

Ejercicio Práctico

Ejercicio

Crea un componente Card que tenga tres slots nombrados: header, content y footer. Usa este componente en un componente padre para mostrar una tarjeta con un encabezado, contenido principal y pie de página.

Solución

<!-- Componente Hijo: Card.vue -->
<template>
  <div class="card">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot name="content"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
header, footer {
  background-color: #f9f9f9;
  padding: 8px;
}
</style>

<!-- Componente Padre -->
<template>
  <div>
    <card>
      <template v-slot:header>
        <h2>Encabezado de la Tarjeta</h2>
      </template>
      <template v-slot:content>
        <p>Este es el contenido principal de la tarjeta.</p>
      </template>
      <template v-slot:footer>
        <p>Pie de página de la tarjeta</p>
      </template>
    </card>
  </div>
</template>

<script>
import Card from './Card.vue';

export default {
  components: {
    Card
  }
}
</script>

Explicación

El componente Card define tres slots nombrados: header, content y footer.
En el componente padre, se utiliza v-slot para insertar contenido en cada uno de los slots nombrados del componente Card.

Conclusión

Los slots en Vue.js son una herramienta esencial para crear componentes flexibles y reutilizables. Permiten a los desarrolladores insertar contenido dinámico en componentes hijos desde componentes padres, lo que facilita la creación de interfaces de usuario complejas y personalizables. Con la comprensión de los slots básicos, nombrados y scoped, puedes construir componentes más robustos y adaptables en tus aplicaciones Vue.js.

Slots

Conceptos Clave

Slot Básico

Ejemplo

Explicación

Slot Nombrado

Ejemplo

Explicación

Slot Scoped

Ejemplo

Explicación

Ejercicio Práctico

Ejercicio

Solución

Explicación

Conclusión

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js