Slots en vue.js: qué son y cómo utilizarlos
(2 min. de lectura) 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>