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.