Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

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.

  • 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.
Descarga la chuleta de Vue 3 gratis

Descarga la chuleta de Vue 3

Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️

DESCARGA GRATIS LA CHULETA AHORA 💾

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue