Uso de Slots para Inyectar HTML en Componentes Hijos

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:18

Uso de Slots para Inyectar HTML en Componentes Hijos

Curso Básico de Vue.js 2

Clase 19 de 38

Clase 19 / 38

Recursos

¿Qué son los slots en el desarrollo de componentes?

En el desarrollo de componentes, especialmente en frameworks modernos como Vue.js, una necesidad común es que los componentes hijos reciban contenido dinámico en lugar de propiedades fijas. Este contenido se puede inyectar utilizando el concepto de slots, que actúa como un canal flexible para distribuir y presentar contenido HTML desde un componente padre al hijo, permitiendo así un nivel considerable de personalización y reutilización.

¿Cómo se utiliza un slot básico?

Un slot es esencialmente un marcador de posición en el componente hijo, donde el componente padre puede inyectar cualquier contenido HTML. Esto se logra simplemente al declarar un tag slot en el template del componente hijo.

Por ejemplo, para definir un slot básico:

<template>
  <div>
    <slot></slot>
  </div>
</template>

Y en el componente padre, puedes incluir contenido HTML directamente:

<child-component>
  <p>Este es un párrafo inyectado desde el componente padre.</p>
</child-component>

Aquí, el párrafo se inserta dentro de la etiqueta div del componente hijo.

¿Cómo funcionan los slots con nombres?

Además de los slots básicos, Vue.js permite usar slots con nombre, lo que facilita la gestión de múltiples bloques de contenido. Cada slot puede tener un identificador único o "nombre", para especificar diferentes partes del contenido que se desea personalizar.

Para definir slots con nombre:

En el componente hijo, utiliza los slots nombrados dentro de un template con un atributo name:

<template>
  <div>
    <slot name="texto"></slot>
    <slot name="link"></slot>
  </div>
</template>

Al utilizar el componente en el padre, especifica el contenido para cada slot nombrado utilizando la directiva v-slot:

<child-component>
  <template v-slot:texto>
    <p>Contenido del slot de texto.</p>
  </template>
  <template v-slot:link>
    <a href="#">Este es un link inyectado desde el padre.</a>
  </template>
</child-component>

Uso del tag template en Vue.js

El tag template en Vue.js es fundamental al trabajar con slots, ya que permite agrupar contenido sin generar nodos adicionales en el DOM. Esto simplifica el comportamiento y mantenimiento del código.

El template no renderiza una etiqueta en el DOM, pero todo el contenido dentro de él se transfiere a la visualización.

Utilizar el tag template es una práctica estándar para mantener el DOM limpio y eficiente.

Ventajas de usar slots

Los slots son una herramienta poderosa y flexible al manejar contenido dinámico entre componentes. Proporcionan:

Flexibilidad: Permiten a los componentes padres inyectar diversos tipos de contenido HTML a sus hijos.
Reutilización: Mejoran la reutilización de componentes al permitir adaptaciones de contenido sin tener que escribir extensas configuraciones de props.
Organización del código: Facilitan una estructura organizada del código al separar el comportamiento de los componentes de su contenido.

Recomendaciones al trabajar con slots

Siempre que sea posible, utiliza los slots con nombre para una gestión más clara del contenido.
Mantente atento a la estructura del DOM cuando uses template para asegurar que tu aplicación sigue siendo eficiente.
Explora las opciones avanzadas de slots, como los scoped slots, para maximizar las capacidades interactivas de tus componentes.

Con estas herramientas y buenas prácticas, los desarrolladores pueden crear interfaces de usuario ricas y flexibles, eficientizando el flujo de datos y la presentación de contenido dinámico entre componentes. ¡Sigue practicando y aprovecha al máximo los beneficios que te ofrecen estas técnicas avanzadas!

Miguel Angel Reyes Moreno

Hace 5 años

Slots

Los slots son una API de distribución de contenido que permite que los componentes padres le inyecten HTML a los componentes hijos.

Podemos usar cualquier HTML válido dentro de los slots.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Primera Vue</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div
    id="app"
    v-bind:style="{ background: '#' + color }">

    <coin-detail
      v-on:change-color="updateColor"
      v-bind:coin="btc"
      >
      <template v-slot:text>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus ipsam, rem voluptas reprehenderit sapiente eveniet adipisci laudantium illo eum, voluptates corporis eos. Vel neque est quos dignissimos autem pariatur saepe?
        </p>
      </template>
      <template v-slot:link>
        <a href="#">Link!</a>
      </template>
    </coin-detail>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>

Vue.component('coinDetail', {
  props: ['coin'], //*Pertenecen al componente 'padre'
  data() {
    return {
      showPrices: false,
      value: 0,
    }
  },
  methods: {
    toggleShowPrices() {
      this.showPrices = !this.showPrices

      this.$emit('change-color',
      this.showPrices ? 'FF96C8' : '3D3D3D') //*Segundo parametro es el color que tiene que utilizar el componente padre
    }
  },
  computed: {
    title () {
      return `${this.coin.name} - ${this.coin.symbol}`
    },

    convertedValue () {
      if(!this.value){
        return 0
      }
      return this.value / this.coin.price
    }
  },
  template: `
    <div>
      <img
        v-on:mouseover="toggleShowPrices"
        v-on:mouseout="toggleShowPrices"
        v-bind:src="coin.img"
        v-bind:alt="coin.name"
      >

      <h1
        v-bind:class="coin.changePercent > 0 ? 'green' : 'red'">
        {{ title }}
        <span v-if="coin.changePercent > 0">🤑</span>
        <span v-else>🤯</span>
        <button v-on:click="toggleShowPrices">
          {{ showPrices? '🙈' : '🐵' }}
        </button>
      </h2>

      <input type="number" v-model="value">
      <span>{{ convertedValue }}</span>

      <slot name="text"></slot>
      <slot name="link"></slot>

      <ul v-show="showPrices">
        <li
          class="uppercase"
          v-bind:class="{
            green: p.value > coin.price,
            orange: p.value === coin.price,
            red: p.value < coin.price,
          }"
          v-for="(p, index) in coin.pricesWithDays"
          v-bind:key="p.day">
          {{ index }} - {{ p.day }} - {{ p.value }}
        </li>
      </ul>
    </div>
  `
})

new Vue({
  el: '#app',

  data() {
    return {
      btc: {
        name: 'Bitcoin',
        symbol: 'BTC',
        img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
        changePercent: 10,
        price: 8400,
        pricesWithDays: [
          { day: 'Lunes', value: 8400 },
          { day: 'Martes', value: 7900 },
          { day: 'Miercoles', value: 8200 },
          { day: 'Jueves', value: 9000 },
          { day: 'Viernes', value: 9400 },
          { day: 'Sabado', value: 10000 },
          { day: 'Domingo', value: 10200 },
        ],
      },
      color: 'f4f4f4',
    }
  },

  methods: {
    updateColor(color) {
      this.color = color || this.color.split('').reverse().join('');
    }
  }
});

Comentarios (31)31 comentarios

Juan Esteban Galvis

Hace 6 años

Lautaro Cabral

Alejandro Vega Meneses

Erika De La Luz Castellanos

VERDUGO CHAVEZ DIANA ALEJANDRA

Andrés Felipe Lopez gomez

Fernando Andres Muñoz Suazo

Carlos Eduardo Gomez García

Jose Luis Barboza Gonzales

Cristian Brugos

Hace 7 años

Sebastián Buitrago

Rodrigo Ramos Xochiteotzin

jonathan sanchez

Abner Batz

Diego Andres Cardenas Caro

Wilson Fabian Pérez Sucuzhañay

Tomás Mercado

Axel Bryan Ávila García

Néstor Peña

Guillermo Vara De Gante

Yair Enrique Riascos Mestre

José Israel Díaz Zapata

Jaime David Burbano Montoya

Juan Jose Puente Scapolatempo

Juan Pablo Jimenez

Edwin Geovanny Chavarría Segovia

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Uso de Slots para Inyectar HTML en Componentes Hijos