No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Slots

19/38
Recursos

Aportes 29

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渟lot鈥. 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