Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Utilización de Slots

29/53
Recursos

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

UPDATE VUE 3*

En Vue 3 los slots tienen que usarse encerrando tu HTML en una etiqueta <template> el cual debe llevar el atributo: v-slot:name esto se explica en el curso básico

Genial el Slot, muy util.

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. Es por ello que en este artículo se presentan las principales características, su sintaxis y un ejemplo real de implementación en Vue.Js.

Otro contexto de uso de slots.

Imaginen los famosos mensajes de advertencia. En el hijo tienes declarada la estructura, presentación y comportamiento. pero desde los componentes padres puedes pasarle la informació que queires que proyecten. Advertencia, Satisfacción, Error, etc.

El slot en VUE 3 me quedó asi:
Notification.vue:

   <div class="is-danger">
       <slot name="body">Algo anduvo mal</slot>
   </div> 

App.vue:

<pm-notification v-show="showNotification">
      <template v-slot:body>
        <p>No se encontraron resultados</p>
      </template>
    </pm-notification> 

los watch deben llamarse igual que las propiedades por ejemplo si quiero observar la propiedad showNotification entonces el watch tambien deberá.
No devuelven valores sino ejecutan codigo.

cuando quiero que haya 0 resultados jajaja

Hasta ahora el curso está increíble 😄 Es retador, hay mucha información por asimilar, pero está increíble

Excelente clase, los Slots son geniales!!

genial aplique un slot en el Loader de modo que del componente padre podamos pasar un mensaje personalizado y lo logre… fino lo se los slot

Creo que para arreglar la UI es mejor poner el componente notification debajo del navbar y poner

v-show="!showNotification"

en el parrafo que contiene a encontrados: 0 ya que el texto de la notificacion dice no se encontraron resultados por lo cual mostrar ese mensaje de abajo no cuadra
PD: Se pone la propiedad

!showNotification

con ! para poder mostrar el elemento cuando la propieda sea contraria para que no se muestre con la notificacion

Slots
Funcionalidad que cuentan los componentes. Nos permiten inyectar desde el componente padre html con elementos dentro de los componentes hijos.