¿Tienes componentes que no son lo suficientemente flexibles cuando intentas utilizarlos en diferentes contextos?

El truco

<!-- ANTES -->
<template>
  <div class="card">
    <header>{{ headerText }}</header>
    <main>{{ content }}</main>
    <footer>{{ footerText }}</footer>
  </div>
</template>

<script>
export default {
  props: ['headerText', 'content', 'footerText']
}
</script>

<!-- DESPUÉS -->
<template>
  <div class="card">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {}
</script>

Usar slots y scoped slots te permite crear componentes más flexibles y poderosos. Con slots, puedes personalizar el contenido de cada sección del componente desde el lugar donde lo usas. Los scoped slots van aún más allá al permitir pasar datos desde el componente padre al hijo, aunque en este ejemplo básico nos centramos solo en slots. Puedes ver cómo, al eliminar las props y usar slots, el componente puede adaptarse a diferentes casos de uso simplemente especificando qué contenido va en cada sección.

Conclusión: Adopta slots para hacer tus componentes Vue.js más versátiles y prepararlos para cualquier situación.