Slots

Sufre casi media hora con un problema, los slot no mostraban nada (La consola no mostraba errores ni warning, código revisado mil veces y hasta cambie el navegador), la solución?

Los slot se introdujeron en la versión 2.6 de Vue JS, tenía el CDN de una versión anterior 🗣🗣🗣🗣🗣🗣🗣🗣

Si les sucede van a la página de Vue Js y cambian el script. No sufran como yo jajaja

SLOTS

-¿ Qué es?
Es una API de distribución de contenido.

• ¿Para qué se utiliza?
  Para inyectar código HTML a un componente hijo

• ¿Cómo se utiliza?
  En el componente hijo, dentro de su template ponemos:

<slot name="nombreDelSlot"></slot>

Mientras que en el HTML, dentro del tag de nuestro componente ponemos:

<template v-slot="nombreDelSlot"></template>

Con el ejemplo que venimos manejando sería:

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

<coin-detail :coin="btc" @change-color="updateColor">
	<template v-slot:text>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore rerum optio natus sapiente consequuntur nam possimus soluta deleniti, dolorum minima ut eligendi totam praesentium eum cumque eaque nobis! Odio, sunt!</p>
	</template>
	<template v-slot:link>
		<a href="http://platzi.com">Platzi</a>
	</template>
</coin-detail>

En los componentes cuando ocupamos recibir contenido en lugar de recibir propiedades, podemos utilizar Slots que es una API de distribución de contenido que permite que un componente padre le inyecte HTML a un componente hijo.

Para utilizar varios Slots, se debe colocar un nombre a cada slot para identificarlos:

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

Y para llamar al Slot en el HTML se debe encerrar el Slot dentro del tag template que es un tag de VueJS, que permite renderizar contenido sin la necesidad de utilizar un tag, el tag template en la renderización final es eliminado:

<template v-slot:text>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, eaque quisquam. Exercitationem, quisquam alias magnam vel unde quidem eius ipsa!</p>
</template>

Básicamente los slots son como los sections y yield de Blade/Laravel, puedes indicarles dónde poner el contenido, eso está genial!

excelente, llevo un tiempo trabajando con vue y no conocía los slots. Se agradece.

De hecho slot viene de los web components que son los componentes nativos que se pueden generar con JS vanilla por si les interesa ese tema hay un curso de web components con DeGranda super bueno y tambien veran porque es mas cool usar frameworks para crear componentes que con componentes nativos

El Slot en Vue es una funcionalidad inspirada en la especificación de Wed Components con la finalidad de poder definir zonas de contenido distribuido.

Esta funcionalidad, es muy útil a la hora de desarrollar componentes genéricos. La funcionalidad permite al desarrollador que está utilizando tu componente una mayor flexibilidad para seguir utilizando tu componente y adaptarlo a sus necesidades especificas.

Slot: Api de distribución de contenido, que permite que un componente padre inyecte a un componente hijo.

Me perdi un poco cuando dice que los slot sirven para pasar contenido del padre al hijo.
En el ejemplo, no se pasa contenido desde la instancia de Vue, ni de fuera el componente, de hecho el contenido se pasa como children del mismo componente, entonces para que se usan los slots?

Cuando tenemos un componente en html ej. <coin-detail></coin-detail> y queremos agregar contenido como children sin que necesariamente dependa de la data del componente, como html, texto, etc.

<coin-detail v-on:change-color="updateColor" :coin="btc">
        <p>Si pones este contenido asi en Html, sin utilizar la etiqueta slot dentro del template</p>
        <span> estas dos etiquetas children no se va a mostrar</span
 </coin-detail>```

Entonces <slot></slot> en Vue sirve para 
1. Indicarle a Vue que Vamos a enviarle contenido desde el html
2. Posicionar el contenido que enviemos como children dentro del template
3. Referenciar especificamente el tipo de contenido dentro del html con los atributos name y v-slot

una clase atras pienso pero qué pasaría en x caso y pum el siguiente video esta el caso jaja pensando en un modal viene bien este ejemplo.

Tardé como 20 minutos en resolver el error de que no me mostraba nada y el problema era que el template no estaba dentro de la etiqueta coin-detail
Jajajaja. Para que tengan cuidado al copiar el código

¿En React se traduciria como cuando pasas el child, no?

Para los que vienen de React.
Pasarle un solo slot, es como pasarle un children a un componente.

Pasarle un slot name, es como pasarle un componente por propiedades a otro componente.

Me acabo de enamorar de los slots, en analogía con react, los slots son como los children, pero lo que me fascina es que podemos tener multiples slots.

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/[email protected]/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>
      </h1>

      <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('');
    }
  }
});

Que excelente clase

19.-Slots

Cuando en lugar de recibir propiedades, recibimos contenido por ejemplo recibir HTML desde el componente padre usamos SLOTS, que es básicamente una API de distribución de contenido que permite que un componente padre le inyecte HTML a un componente hijo.

Cuando usamos varios slots tenemos que usar algo llamado name-slots que consiste en asignarle un nombre a cada uno de los slots para que puedan ser reemplazados por el contenido correspondiente. Para poderlos usar tenemos que usar el tag template que nos permite renderizar contenido sin necesidad de incluir un tag, al momento que se genera la lista vue elimina el template y solo queda el párrafo.

Una vez puesto el template se tiene que usar v-slot:nombreSlot.

Tener en cuenta que al usar slots podemos usar cualquier tipo de HTML. Cualquier tag válido.

creo que los slot me hicieron volar la cabeza y hacer que la visualizacion de datos sea magnifica

Slots

En muchos casos los componentes no necesitan recibir propiedades, sino contenidos, como el HTML del componente padre. Para esto en VueJS se utilizan los Slots, que son APIs de distribución de contenido, la cuál permite que un componente padre le inyecte contenido a un componente hijo.

Solo es necesario abrir un tag slot en la propiedad template del componente hijo, mientras que del lado del HTML, en el componente solo necesario agregar el HTML que se va a inyectar.

<slot></slot>

<coin-detail 
      v-on:change-color="updateColor"
      v-bind:coin="btc">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</coin-detail>

El uso de Slots brinda mucha flexibilidad, no solamente se puede incluir un slot, sino todos lo que sean necesarios, para ello se utilizan los name slots, para que estos sean remplazados por el contenido correspondiente.

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

Para poder utilizar los Slots con nombres es necesario utilizar el tag template, éste es un tag de VueJS que permite renderizar contenido sin la necesidad de incluir un tag. En el momento en que se genera la vista VueJS elimina el tag template y solamente deja el contenido, para nombrar el slot se utiliza la directiva v-slot seguido de : y el nombre del slot:

<template v-slot:text>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</template>

Cualquier HTML válido es factible introducirlo dentro de un slot, de ésta manera se extiende la manera de introducir información de un componente padre a un componente hijo.

En ocasiones habrá componentes que en lugar de recibir propiedades querrán recibir contenido, por ejemplo, recibir HTML desde el componente padre.

Esto se puede hacer en Vue con una característica llamada Slots, que es básicamente una API de distribución de contenido, que permite que un componente padre le inyecte HTML a un componente hijo.

Lo primero que hay que hacer para usar este concepto es añadir una etiqueta slot en formato HTML en el lugar donde se inyectará el código deseado.

Y para enviarle el código que insertará en el slot basta con ponerlo dentro de la etiqueta del componente.

En caso de que un componente necesite usar más slots se le puede asignar una propiedad name a cada uno para diferenciarlos.

En la version que estoy usando de Vue (2.6.12) la sintaxis de v-slot fue cambiada por “slot”. Entonces para las nuevas personas que lleguen deben usar la instrucción

<template slot:text> <p>Lorem</p> </template>
<template slot:link> <a <a href="#">Link</a> </template>

        - La comunicación de PADRES -> HIJOS debe ser con propiedades

            - SLOT: Se utiliza para mandar código HTML al hijo
              <slot name="nombreDelSlot"></slot>
            - TEMPLATE: Es el tag que se utiliza para enviar el codigo HTML al hijo
              <template v-slot="nombreDelSlot"></template>

solo me trabajo el codigo de la sgte manera:
<template slot=text>
es decir quitandole la v- y los dos puntos por un igual

no me quedo muy claro en que momento usar los slots :S

App.js en el componente hijo:

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

index.html

        <coin-detail
        v-on:change-color = "updateColor"
        v-bind:coin="btc">
        <template v-slot:text>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, sunt corporis perspiciatis repellat dignissimos voluptates delectus reiciendis quasi eaque, explicabo quos ratione voluptatem a quod animi magni tempora? Facere, vel.</p>
        </template>
        <template v-slot:link>
            <a href="#">Link!</a>
        </template>
        </coin-detail>

Los slots son un mecanismo de Vue JS que sirve para insertar contenido HTML dentro de los componentes. Es decir, con los props puedes pasar objetos y variables javascript a los componentes y con los slots puedes insertar contenido HTML dentro de otros componentes

👌

Whaoo que interesante, poco a poco voy entendiendo que vuejs tiene el control de crear las etiquetas básicas que tiene HTML por defecto, es una librería que te permite crear etiquetas y simular el comportamiento, como eventos y propiedades, los slots terminan de aclarar ese punto.
Muchas gracias.

Las utilidades de este elemento es increíble! pueden crearse bloques de algun sub-elemento a usar y aplicarlo en el DOM