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
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Consumir API's REST
Fetch API & Trae
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 12
Preguntas 1
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.