• 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 // No queremos validación
},
  • 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.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Vue 3, Conoce todas las novedades?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬