En esta lección aprenderemos cómo crear, emitir o disparar y escuchar eventos personalizados en Vue.js mientras que al mismo vamos a refactorizar nuestro componente de tarea, para que podamos eliminar una tarea sin necesidad de pasar todo el listado de registros a cada componente.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Notas

Actualmente podemos eliminar tareas porque pasamos el listado completo de tareas como una propiedad a nuestro componente app-task, esto nos permite, mediante el método splice de JavaScript eliminar las tareas directamente desde tasks:

Aprende cómo funciona el método splice() de JavaScript.

Sin embargo esto no es lo ideal, ya que la idea es que el componente app-task represente a una sola tarea y no al listado completo.

Como una solución rápida, podríamos hacer referencia al objeto VM principal con $parent y directamente eliminar las tareas, sin pasar todas las tareas al componentes:

Pero nuevamente esto no sería lo más indicado ya que la idea de los componentes es que sean reusables e independientes del entorno al cual pertenezcan. Por tanto lo que vamos a hacer es emitir un evento personalizado utilizando el método $emit

Lo primero que pasamos a $emit es el nombre del evento (remove) y el argumento de dicho evento, que en este caso es el indice de la tarea que queremos eliminar (this.index).

Dentro de nuestra plantilla debemos añadir los cambios necesarios para poder escuchar a este evento personalizado. Esto lo hacemos utilizando la directiva v-on y el nombre del evento personalizado:

Dentro de @remove llamamos al método deleteTask, este método se va a encontrar dentro del objeto VM principal.

Los eventos personalizados los colocamos de forma similar a como lo hemos hecho con otros eventos como click (@click) y submit (@submit).

En nuestro objeto VM principal agregamos el método deleteTask. Dentro de este método recibimos el indice de nuestra tarea (index) que nos permitirá hacer referencia a ésta y eliminarla del listado:

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Lección anterior Separación de datos entre el modelo y la vista en Vue.js 2 Lección siguiente Uso del "Event Bus" para comunicar componentes en Vue 2