Enviando código Html entre componentes
Es posible que necesites no solo enviar valores de un componente padre a un componente hijo, que se hacen mediante los props, si no también código Html que se renderice en el componente hijo. Por ejemplo, al creas una tarjeta o card para múltiples propósitos, enviar solo valores te limita demasiado y quizás tu card no resulte tan reutilizable. Pero si pudieras enviar código Html, la historia sería distinta.
En este tutorial aprenderemos eso específicamente, a enviar código Html de componente padre a hijo de tal forma que este se renderice dentro del componente hijo.
Índice
1. Qué es un slot
En Vuejs para poder enviar código Html del componente padre al componente hijo utilizaremos los slots. Este es una etiqueta en el componente hijo que indica el lugar donde se renderizará el código enviado desde el componente padre, veamos el ejemplo.
<!--Componente hijo-->
<template>
<div>
<textarea v-model="message"></textarea>
<slot></slot>
</div>
</template>
Por otro lado, en el componente padre lo único que tenemos que hacer es enviar el código Html dentro de las etiquetas del componente que estamos utilizando, que en el siguiente ejemplo es <my-component>, veamos el ejemplo.
<my-component>
<p>Este es el codigo html que viajará al componente hijo</p>
</my-component>
De esa forma tan simple, ya somos capaces de hacer que nuestros componentes tengan otro nivel de reutilizabilidad.
2. Enviando varios grupos de Html
Vuejs es aún más potente, ya que nos permite enviar varias agrupaciones de código Html al componente hijo. Esto nos sirve para agrupar el código que se envía del componente padre al componente hijo y renderizar el código enviado en partes específicas del componente.
Para lograr esto, dentro del componente hijo utilizaremos varias etiquetas <slot> con el parámetro name para diferenciarlos.
<template>
<div>
<textarea v-model="message"></textarea>
<slot name="primero"></slot>
<slot name="segundo"></slot>
</div>
</template>
Por otro lado, en el componente padre solo debemos utilizar la etiqueta <template></template> con el parámetro v-slot: seguido del nombre del <slot> que utilizamos en el componente hijo, veamos en el ejemplo.
<my-componente>
<template v-slot:primero>
<p>Contenido del primero slot</p>
</template>
<template v-slot:segundo>
<p>Contenido del segundo slot</p>
</template>
</my-componente>
3. Tu turno
Ahora ya sabes crear componentes reutilizables al extremo así que te toca utilizar esta característica que acabamos de aprender para crear componente con múltiples slots y hacer componentes super eficientes.