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.
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:
remove: function () {
this.tasks.splice(this.index, 1);
},
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:
this.$parent.tasks.splice(this.index, 1);
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
remove: function () {
this.$emit('remove', this.index);
},
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:
...
<li is="app-task" v-for="(task, index) in tasks"
:tasks="tasks" :task="task" :index="index" @remove="deleteTask"></li>
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:
...
deleteTask: function (index) {
this.tasks.splice(index, 1);
},
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
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