- 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
emits
del 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-add
queremos pasar la cantidad que debe aumentar el valor de count
.
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
},
- La función que valida debe retornar
true
o false
, 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.