Tutorial de Vue Slots

Vue tiene soporte para tragamonedas integrado y se basa en el dom de sombra. Es una especificación que todavía está en desarrollo, pero que vale la pena echarle un vistazo para aprender más sobre cómo funcionan, en caso de que este enfoque de desarrollo se vuelva más común. Angular JS tiene un tipo similar de característica de distribución de contenido que se conoce como transclusión. Este tutorial echará un vistazo a algunos ejemplos de ranuras en VueJS y cómo puede usarlas.

---

Un ejemplo básico de ranura

Estamos comenzando con una pizarra en blanco para comenzar a trabajar con ranuras en VueJS. En nuestro archivo principal App.vue, solo tenemos un marcado simple que usa las capacidades de flexbox de Bootstrap para centrar algo de texto en la página. Cosas sencillas.
App.vue

1 2 3 4 5 6 7 8 9 10 11

<template>     <div class="d-flex justify-content-center">              </div> </template>   <script>     export default {       } </script>

---

Crear un archivo SlotExample.vue

Podemos crear un ejemplo de ranura como componente en nuestro proyecto y colocarlo en un directorio de componentes como ese.

Pongamos el marcado más básico en este archivo como lo tenemos aquí.
SlotsExample.vue

1 2 3 4 5

<template>     <div>         <slot>Text In Slots Example</slot>     </div> </template>

El código anterior no usa realmente una ranura per se, pero es un lugar donde podemos aceptar el marcado de otro componente para renderizar dentro de la ranura. En este momento, tenemos el texto de "Ejemplo de texto en ranuras" entre las etiquetas <slot>. Lo que esto significa es que si * no * pasamos ningún marcado en la ranura, este texto se mostrará de forma predeterminada.

Ahora importemos el componente SlotsExample.vue en el archivo App.vue, regístrelo y hagamos uso de él.
App.vue

1 2 3 4 5 6 7 8 9 10 11 12 13

<template>     <div class="d-flex justify-content-center">         <slots-example></slots-example>     </div> </template>   <script>     import SlotsExample from './components/SlotsExample.vue';       export default {         components: {SlotsExample}     } </script>

Visitar nuestra aplicación en el navegador muestra este texto predeterminado en acción.

---

Distribución de contenido con ranuras

Ahora mira esto. Vamos a realizar un cambio en la etiqueta <slots-example> en App.vue. Lo que podemos hacer es poner un marcado html entre las etiquetas <slots-example> </slots-example>. Este marcado se renderizará en lugar de las etiquetas <slot> </slot> en SlotExample.vue. Veamos.

App.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template>     <div class="d-flex justify-content-center">         <slots-example>             <h1>THE REAL DEAL</h1>         </slots-example>     </div> </template>   <script>     import SlotsExample from './components/SlotsExample.vue';       export default {         components: {SlotsExample}     } </script>

Ahora, si visitamos el navegador, la marca se inserta donde se definió la etiqueta <slot>. También tenga en cuenta que el texto alternativo de "Ejemplo de texto en ranuras" se reemplaza por completo.

Entonces, en el sentido más básico, cuando desee usar ranuras en VueJS, agregue las etiquetas <slot> </slot> en el componente secundario donde espera recibir datos del exterior. Slot es una palabra clave reservada en VueJs y tan pronto como ve ese marcado, lo hace para renderizar el contenido que se está pasando desde el exterior. En nuestro caso, simplemente colocamos una etiqueta <h1> con algo de texto para mostrar que las tragamonedas son lo mejor.

---

Estilos de tragamonedas y compilación

---

estilo de ranura

En el archivo App.vue, estamos pasando <h1> THE REAL DEAL </h1> como marcado para ser renderizado en el de SlotExample.vue. Es importante saber dónde se compila este código. Podemos verificar esto usando reglas de estilo. Podemos agregar un estilo muy básico en SlotExample.vue así.
SlotExample.vue

1 2 3 4 5 6 7 8 9 10 11

<template>     <div>         <slot>Text In Slots Example</slot>     </div> </template>   <style>     h1 {         color: blue;     } </style>

Cuando visitamos el navegador ahora, vemos que el color ha cambiado.

¿Qué nos dice esto? Las reglas de estilo del componente secundario se aplican a cualquier dato que se transmita desde el exterior cuando se usa una ranura.

---

compilación de tragamonedas

Ahora cambiemos lo que hay entre las etiquetas <slots-example> de App.vue. Ya no codificaremos un valor, pero usaremos una propiedad de datos para completar el marcado como vemos aquí.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<template>     <div class="d-flex justify-content-center">         <slots-example>             <h1>{{ slotMarkup }}</h1>         </slots-example>     </div> </template>   <script>     import SlotsExample from './components/SlotsExample.vue';       export default {         components: {SlotsExample},           data() {             return {                 slotMarkup: 'THE REAL DEAL'             }         }     } </script>

¿Crees que esto seguirá funcionando? Parece que todavía funciona.

Entonces, para compilar la plantilla, o en otras palabras, representar cualquier tipo de operación de VueJS, el componente donde realmente tiene el código en la plantilla será el que realice los cambios. Entonces, en nuestro caso, la instancia raíz <slots-example> es la que realiza los cambios. Aunque le estamos pasando estos datos al niño usando una ranura, es en la plantilla de este archivo App.vue donde el código tiene prioridad. La conclusión es que cualquier estilo se maneja en el componente secundario, mientras que todo lo demás se realiza en el componente principal.

---

Tragamonedas con nombre en Vue

La etiqueta de ranura se puede utilizar con un atributo especial de nombre. Este es un medio para personalizar cómo se distribuye el marcado que define en los espacios. Esto le permite configurar más de una ranura, ya que ahora cada una puede identificarse de forma única con el atributo de nombre. Además, aún puede tener una ranura sin nombre, y eso actuará como el caso predeterminado, por así decirlo. Veamos cómo funciona esto.

Aquí queremos hacer uso de más de una ranura. Al nombrar cada ranura, ahora podemos hacerlo. En el marcado de ejemplo a continuación, estamos diciendo que estamos listos para aceptar el marcado desde el exterior a través de una ranura que tiene un nombre de título, así como una ranura diferente con un nombre de cuerpo.
SlotsExample.vue

1 2 3 4 5 6 7 8 9 10 11 12

<template>     <div>         <slot name="title"></slot>         <slot name="body"></slot>     </div> </template>   <style>     h1 {         color: blue;     } </style>

En el componente principal, ahora definimos estas ranuras como vemos. La etiqueta h1 tiene un atributo, ranura, que se establece en título. La etiqueta h3 tiene un atributo de ranura establecido en cuerpo.
App.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<template>     <div class="d-flex justify-content-center">         <slots-example>             <h1 slot="title">{{ slotMarkup }}</h1>             <h3 slot="body">This is some body text son.</h3>         </slots-example>     </div> </template>   <script>     import SlotsExample from './components/SlotsExample.vue';       export default {         components: {SlotsExample},           data() {             return {                 slotMarkup: 'THE REAL DEAL'             }         }     } </script>

Podemos comprobarlo en el navegador y ver cada tragamonedas actuando de forma independiente gracias a esas tragamonedas con nombre.

---

Ranuras predeterminadas

Intentemos algo más ahora. En nuestros archivos de ejemplo, podemos eliminar la ranura con cualquier referencia a "cuerpo". Una vez que hagamos esto, tendremos una ranura con nombre y otra ranura sin nombre. Vea este marcado.
App.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<template>     <div class="d-flex justify-content-center">         <slots-example>             <h1 slot="title">{{ slotMarkup }}</h1>             <h3>This is some body text son.</h3>         </slots-example>     </div> </template>   <script>     import SlotsExample from './components/SlotsExample.vue';       export default {         components: {SlotsExample},           data() {             return {                 slotMarkup: 'THE REAL DEAL'             }         }     } </script>

SlotsExample.vue

1 2 3 4 5 6 7 8 9 10 11 12

<template>     <div>         <slot name="title"></slot>         <slot></slot>     </div> </template>   <style>     h1 {         color: blue;     } </style>

En este caso, VueJS ahora tratará la ranura sin nombre como la ranura predeterminada. Lo que esto significa es que todo lo que estamos pasando en el que no se ha asignado una ranura con nombre, como la etiqueta h3 en nuestro caso, se procesará en la ranura predeterminada. La etiqueta h1 con el nombre de la ranura de "título" se representará en el <nombre de la ranura = "título"> </slot> mientras que la etiqueta h3 que no tiene el nombre de la ranura se representará en el valor predeterminado. Cuando lo miramos en el navegador, esto es cierto.

También existe el concepto de contenido predeterminado en las tragamonedas. Imaginemos que podríamos tener una ranura de subtítulos, pero no estamos seguros de si se pasará algún subtítulo. Queremos mostrar algo si no se pasa nada, pero mostrar lo que se pasa en caso contrario. Podemos configurar esto así.

1 2 3 4 5 6 7 8 9 10 11 12 13

<template>     <div>         <slot name="title"></slot>         <span><slot name="subtitle">Default Sub Title</slot></span>         <slot></slot>     </div> </template>   <style>     h1 {         color: blue;     } </style>

Con solo este marcado, el resultado se verá así en el navegador.

Si queremos sobrescribir el contenido predeterminado en esa ranura con nombre, podemos hacerlo. Aquí se agrega otra ranura en App.vue que especifica una etiqueta h5 que se usará como subtítulo.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<template>     <div class="d-flex justify-content-center">         <slots-example>             <h1 slot="title">{{ slotMarkup }}</h1>             <h5 slot="subtitle">The Sub Title Passed In</h5>             <h3>This is some body text son.</h3>         </slots-example>     </div> </template>   <script>     import SlotsExample from './components/SlotsExample.vue';       export default {         components: {SlotsExample},           data() {             return {                 slotMarkup: 'THE REAL DEAL'             }         }     } </script>

Ahora, el resultado en el navegador utilizará los datos que se pasan, y no el texto entre las etiquetas.

---

Resumen del tutorial de Vue Slots

Las ranuras se pueden utilizar para ayudarlo a distribuir su contenido en otros componentes. Es una característica nueva en el desarrollo web, pero puede ser bastante útil para una variedad de situaciones con las que te puedas encontrar. Con suerte, este tutorial le dará algunas ideas de cómo podría ponerlas a trabajar para usted.