Slot y Componentes dinámicos en VUE

Es común requerir que nuestra SPA (Single Page Application) requiera destinar espacios para ser llenados de forma dinámica o dependiendo de alguna condición lógica, para ello podemos usar los Slot y Componentes dinámicos en VUE que ayudan a construir nuestra página web de forma ordenada.

Para aprender backend en Java siga este vínculo

1. Uso de Slot y llenado de espacios en VUE

Los slot permiten definir espacios en nuestros componentes que serán especificados como se llenarán desde el componente padre que utilice importe el componente hijo, de esta forma el padre puede indicar como llenar un espacio HTML al hijo dando gran versatilidad ya que el mismo componente puede tener un espacio que es llenado de forma diferente en función del padre donde se encuentre importado.

Crear un slot es algo muy simple y consta de dos pasos, el primero es definir en el componente hijo la zona HTML que dedicaremos para que quien use el componente lo defina. Esto se muestra en el siguiente código.

<template>
    <div>
      <transition name="efecto" mode="out-in">
        <div id="nav" class="tarjeta" :key="indice">
          <span :key="indice" > {{ datos[indice] }} </span>
        </div>
      </transition>
      <div>
        <slot name="slot1"></slot>
      </div>
    </div>
  </template>

El segundo paso consiste en especificar la sección HTML que llenará el slot en el lugar donde se use este componente hijo. El siguiente código muestra un ejemplo de esta especificación. Observe que el nombre del slot en este caso se usa sin comillas.

<template>
  <div id="nav" class="principal">
    <span>App </span>
    <span>{{ login }}</span>
    <br/>
    <span>Age {{ age }}</span>
    <tarjeta-datos>
      <template v-slot:slot1>
        <span>Componente en Slot</span>
      </template>
    </tarjeta-datos>
  </div>
</template>

2. Manejo de Componentes dinámicos en VUE

Para especificar un componente dinámico en VUE es suficiente con utilizar la etiqueta component y especificar en su atributo is cuál será el componente que se utilizará, esto resulta equivalente a dejar el componente fijo en el código pero con la ventaja que podemos utilizar una variable de la data para establecer el valor del componente y lograr que este cambie en función del valor de la variable.

En el ejemplo siguiente vemos como la variable actual, recibe el valor del nombre del componente, tenga presente que de cualquier manera el nombre del componente debe ser el mismo que se vaya a utilizar en el HTML y que debe ser previamente importado y definido en la sección components de la instancia de VUE.

<component :is="actual"></component>

import TarjetaDatos from './components/TarjetaDatos.vue';

export default {
  components: { TarjetaDatos },
  name: 'App',
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3),
      actual: 'tarjeta-datos'
    }
  },

3. Artículos de Interés