Utilización de Slots

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.

cuando quiero que haya 0 resultados jajaja

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.

Una Observación: El watcher podría también ser de la siguiente manera ya que puede obtener el valor anterior y el valor nuevo del dato que se está observando:

watch: {
    showNotification (newVal) {
      if (newVal) {
        setTimeout(() => {
          this.showNotification = false
      }, 3000);
    }
  }
},

Slot en vue3

En el archivo Notification.vue

<template lang="pug">

.container 
    .colums 
        .colums.is-4
            .notification.is-danger
                slot(name="notify") 
                    p Algo andubo mal

</template>
<style lang="scss" scoped>

</style>

En el archivo **App.vue **

 PmNotification(v-show="showNotification")
    template(#notify)
      p No se encontraron resultados  

el shortcut del <slot> dentro del template es # en otro caso seria v-slot

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.

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.