TypeScript / Vue – Eventos en componentes

Bienvenidos sean a este post, hoy hablaremos sobre los eventos en los componentes.

En el post anterior vimos como manejar el estado de un componente para poder intercambiar informacion entre componentes. Pero tambien vimos muy por arriba como interceptar un evento y asociarlo a una funcion. Hoy nos centraremos mas en este tema, para ello utilizaremos el proyecto que creamos en el post anterior, sino lo poseen les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para ser usado. Nuestro primer paso sera ir a Estado.vue y modificaremos al decorador Options de la siguiente manera:

@Options({
        props: {
          titulo: String,
          msj: String
        },
        emits: ["cliqueadoSubmit"]
})

En este caso agregamos una nueva propiedad al componente llamada emits, esta sirve para indicar que emitira un evento llamado cliqueadoSubmit. Nuestra siguiente modificacion sera en el metodo cliqueado y lo modificaremos de la siguiente manera:

        cliqueado() {
          console.log(`this.miTexto=${this.miTexto}`);
          this.$emit("cliqueadoSubmit", this.miTexto);
        }

En este caso, agregamos la funcion $emit donde la usaremos para emitir un evento. El primer argumento sera el evento que emitiremos, este sera el que establecimos como propiedad anteriormente, y el segundo argumento sera el valor del estado de miTexto. Ya tenemos el evento que emitiremos y el valor con el estado. Nuestra siguiente modificacion sera en App.vue, iremos al template y lo modificaremos de la siguiente manera:

<template>
        <Estado titulo="Estado de un componente"
          @cliqueado-submit="onAppSubmitted"
          :msj="appMsj" >
        </Estado>
</template>

La primera modificacion que agregamos es el manejador de eventos, @cliqueado-submit, y este es para manejar cuando cliqueamos al boton submit, a su vez este evento lo asociaremos a este metodo. Noten como lo llamamos al escuchador de eventos, es una version dividida del nombre que pasamos como propiedad del decorador. Esta conversion usualmente se la denomina como kebab-case. Donde cada palabra que pasemos en la propiedad lo dividira de esa forma. Por ejemplo, si hubieramos usado:

onAppSubmitClicked

Para convertirlo, seria de la siguiente manera:

on-app-submit-clicked

La segunda modificacion es el agregado de la propiedad msj, pero este lo convertimos de un objeto estatico a uno de propiedad de estado de clase. Esto lo hicimos con los dos puntos delante de este y a su vez le estamos inyectando el valor contenido en appMsj. La siguiente modificacion la haremos en la exportacion de la clase que la modificaremos de la siguiente manera:

export default class App extends Vue {
        appMsj:string = "prueba";
        data() {
                return {
                  appMsj: String
                }
        }
        onAppSubmitted(valor: string) {
                console.log(`onAppSubmitted(): ${valor}`);
                this.appMsj = valor;
        }
}

Lo primero que haremos sera definir el elemento que inyectaremos a la propiedad msj. Este a su vez sera para enviar mediante el data, sobre esto hablamos en el post anterior, y por ultimo tenemos el metodo que asociaremos al manejador de eventos que pasamos en el componente Estado. En este bloque, mostraremos un mensaje en la consola para identificador que es este evento y por ultimo asignaremos el valor recibido a appMsj. Con esta modificaciones podemos ejecutar nuestra aplicacion y conectarnos mediante el browser, este se vera de la siguiente manera:

Como asignamos un valor al elemento que unimos a la propiedad del componente de Estado, este se asignara automaticamente y sera nuestro texto predeterminado para el input. Ahora podemos apretar submit y este valor se enviara al log de la consola, veamos el siguiente video:

En el video podemos ver que no solo se envio a la consola el evento de nuestra pagina sino tambien el propio del componente. Probamos varios textos que se vieron reflejados en el log. Ya vimos no solo como enviar estados, relacionar eventos para nuestros componentes sino como podemos pasar manejadores de eventos entre los distintos componentes y valores de estado. Antes de finalizar les dejo un link con todos los archivos del proyecto y modificados en este post:

En resumen, hoy hemos visto como manejar eventos entre componentes, como se utilizan, como se aplican, y un ejemplo practico para verlo en accion. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.