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.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue