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
Fetch API & Trae
Consumir API's REST
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 14
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.
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.