Slots en vue.js: qué son y cómo utilizarlos
En VueJS, los slots son una característica poderosa que permite la composición de componentes de manera flexible, permitiendo que el componente padre pase contenido personalizado al componente hijo. A continuación, te explico los conceptos clave sobre los slots en vuejs. Hay dos tipos de slot- Por defecto
//slotcomponent <template> < div> <slot></slot> </div> </template> //app.vue t<script setupt> import slotComponent from './components/slotComponent.vue' </script> <template> <slotComponent><p>aaaa</p></slotComponent> <template> - Slots nombrados
t<script setupt> //slotComponentPorNombre <template> <div> <slot name="header"t>Encabezado por defecto</slott> <slot name="content"t>Contenido por defecto</slott> <slot name="footer"t>Pie por defecto</slot> </div> </template> //app.vue <script> import slotComponentPorNombre from './components/slotComponentPorNombre.vue' </script> <template> <slotComponentPorNombre> <template v-slot:header> <h1>Encabezado personalizado</h1> </template> <template v-slot:content> <p>Contenido personalizado</p> </template> <slotComponentPorNombre> </template>