Slots en Vue3 <slot>
Vue3 API de opcionesEn Vue3, los slots son un mecanismo que permite al componente padre pasar contenido al componente hijo. Puedes entender los slots como "marcadores de posición" reservados en el componente hijo, donde el componente padre puede insertar cualquier contenido. De esta manera, el componente hijo puede mostrar de manera flexible el contenido pasado por el componente padre sin cambiar su propia estructura.
Uso básico de los slots
Slot predeterminado
El slot predeterminado es el tipo de slot más simple. En el componente hijo, puedes usar<slot>la etiqueta para definir un slot predeterminado. Cuando el componente padre utiliza el componente hijo, puede insertar contenido en este slot.
Ejemplo
<template>
<div class="child">
<h3>Este es el título del componente hijo</h3>
<slot>Contenido predeterminado</slot>
</div>
</template>
Ejemplo
<template>
<ChildComponent>
<p>Este es el contenido pasado por el componente padre</p>
</ChildComponent>
</template>
En el componente padre, podemos<ChildComponent>insertar contenido dentro de la etiqueta, este contenido reemplazará en el componente hijo la<slot>etiqueta. Si el componente padre no pasa contenido, el componente hijo mostrará<slot>el contenido predeterminado dentro de la etiqueta.
Slots con nombre
Los slots con nombre te permiten definir varios slots en el componente hijo y distinguirlos por nombre. En el componente padre, puedes usarv-slotla directiva para especificar en qué slot insertar.
Ejemplo
<template>
<div class="child">
<header>
<slot name="header">Contenido de encabezado predeterminado</slot>
</header>
<main>
<slot>Contenido principal predeterminado</slot>
</main>
<footer>
<slot name="footer">Contenido de pie predeterminado</slot>
</footer>
</div>
</template>
Ejemplo
<template>
<ChildComponent>
<template v-slot:header>
<h1>Contenido de encabezado personalizado</h1>
</template>
<p>Este es el contenido principal pasado por el componente padre</p>
<template v-slot:footer>
<p>Contenido de pie personalizado</p>
</template>
</ChildComponent>
</template>
En el ejemplo anterior, definimos tres slots:header、main(slot predeterminado) yfooter. El componente padre, a través dev-slotla directiva, inserta el contenido en el slot correspondiente.
Slots de ámbito
Los slots de ámbito permiten que el componente hijo pase datos al componente padre, y el componente padre puede renderizar el contenido basándose en estos datos. Esto es muy útil cuando se necesita personalizar la lógica de renderizado interna del componente hijo.
Uso básico
En el componente hijo, puedes mediantev-bindpasar datos al slot. El componente padre, a su vez, puede mediantev-slotla directiva para recibir estos datos.
Ejemplo
<template>
<div class="child">
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: 'Alice', age: 25 }
};
}
};
</script>
Ejemplo
<template>
<ChildComponent v-slot="{ user }">
<p>Nombre de usuario: {{ user.name }}</p>
<p>Edad del usuario: {{ user.age }}</p>
</ChildComponent>
</template>
En este ejemplo, el componente hijo, mediantev-bindva auserpasa el objeto al slot, y el componente padre, mediantev-slot="{ user }"recibe este objeto y, segúnuserlos datos, renderiza el contenido.
Otras extensiones