Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
Vue 3, Conoce todas las novedades
Validar eventos personalizados
- Con Vue 3 podemos validar nuestros eventos personalizados. De esta forma nos aseguramos de que los eventos se disparan y además llevan el payload que estamos esperando. Veamos cómo.
- Como ves en este proyecto creado con Vite, tenemos un componente que emite eventos que a su vez modifican el estado del componente principal
App.vue. - Seguir la pista a estos eventos personalizados pasado un tiempo puede dar lugar a error. Lo ideal sería poder documentarlos para que de un primer vistazo en el componente podamos saber qué es lo que estamos emitiendo.
- Con Vue 3 tenemos acceso a la propiedad
emitsdel componente. Podemos usarla así:
emits: ['count-add', 'count-remove']
- Además de documentar, tiene la ventaja de todos esos eventos serán tratados como eventos personalizados aunque uses identificadores de nativos como click (aunque eso sería una muy mala idea).
- Sin embargo podemos ir un paso más allá y validar el payload del evento personalizado. Supongamos que en el evento
count-addqueremos pasar la cantidad que debe aumentar el valor decount.
this.$emit('count-add', { number: 10})
- Y utilizar ese payload en el componente principal.
<HelloWorld @count-add="(payload) => count += payload.number" ... />
- ¿Qué pasaría si en lugar en enviar un número envío una string?:
this.$emit('count-add', { number: "10" }). El resultado no sería el esperado. Vamos a validar el payload del evento.
emits: {
'count-add': payload => payload && payload.number && typeof payload.number === "number" ? true : false,
'count-remove': null // No queremos validación
},
- La función que valida debe retornar
trueofalse, nada más. De esta forma ahora nos encontramos un warning cuando intentamos emitir el evento personalizado, siendo conscientes de que algo no va bien.
Introducción
Composition API
Novedades Vue 3
No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
