Introducción

Anteriormente vimos qué son los props en Vue y para qué sirven. Vimos que los props sirven para pasar información desde el componente padre al componente hijo. Si no recuerdas o quieres aprender el funcionamiento de los props te dejo el enlace al artículo: Cómo crear y usar props en Vue

En el artículo de hoy vamos a ver cómo crear eventos y para qué sirven ya que son esenciales para la creación de componentes web reutilizables.

Qué son los eventos en Vue

Los eventos o events son la contraparte de los props, es decir, sirven para pasar información desde el componete hijo al padre. El ejemplo típico de uso es de cuando queremos notificar de un suceso en el componente hijo.

Por ejemplo podemos crear un componente que simplemente renderice un botón. Si queremos que este botón sea reutilizable en toda la página web lo que necesitamos es notificar al componente que usa el botón si el usuario hace clic en el enlace.

Lo bueno de los eventos es que a parte de servir para notificar, se pueden pasar datos e información desde el hijo al padre en caso de que la necesitemos.

Los props se pasan desde el componente padre al componente hijo y los eventos del hijo al padre

Cómo crear y emitir eventos

Aunque no lo creas, si has usado Vue seguramente ya hayas usado sin saberlo los eventos ya que el @submit y el @click no son más que eventos que ya vienen por defecto en Vue.

Como supondrás, la forma de recibir eventos es poniendo el @ antes del nombre del evento, pero vamos a ver cómo crear tus propios eventos desde el componente hijo.

Volvamos al ejemplo del Botón ya que es un ejemplo claro para usar eventos. La estrategia a seguir es reaccionar con el evento click de Vue para ejecutar una función que sera la encargada de enviar el evento al componente padre.

<template>
  <button @click="handleClick">{{text}}</button>
</template>
<script>
export default {
  props: {
    text: String
  },
  methods: {
    handleClick() {
      this.$emit("click");
    }
  }
}
</script>

Con la función this.$emit() emites el evento. Dentro de la función tienes que poner el nombre que le quieres dar al evento, es decir, si por ejemplo pones this.$emit("hover"); luego para usarlo tienes que llamar al evento @hover. En este ejmplo le he puesto el nombre de click para que podamos estar a la escucha del click en el botón como si se tratase del evento click que viene en Vue por defecto.

Hay otra forma de crear eventos, se trata de crearlos directamente desde la vista, sin tener que poner el this:

<template>
  <button @click="$emit('click')">{{text}}</button>
</template>

De esta forma ya no necesitas crear un método desde el que enviar el evento. Con ambas formas obtienes el mismo resultado.

Cómo estar a la escucha de eventos

Para usar el botón que acabamos de crear:

<my-button text="Botón de ejemplo" @click="handleClick"></my-button>

Recuerda importarlo dentro del componente para poder usarlo. Si hubieras llamado al evento hover por ejemplo, entonces sería:

<my-button text="Botón de ejemplo" @hover="handleClick"></my-button>

Cómo enviar datos en los eventos

Una cosa muy interesante de Vue es que permite enviar información dentro de los eventos. Puedes enviar cualquier cosa: variables, computadas, resultados de métodos, etc.

Para enviar datos tan solo tienes que añadir un parámetro más al evento:

<template>
  <button @click="handleClick">{{text}}</button>
</template>

<script>
export default {
  props: {
    text: String
  },
  data: () => ({
    example: "Hello world"
  }),
  methods: {
    handleClick() {
      this.$emit("click", this.example);
    }
  }
}
</script>

Para recoger en el componente padre la información que viene del hijo lo tienes que hacer en el método que declaras cuando declaras el evento que estás escuchando:

<template>
  <my-button text="Botón de ejemplo" @click="handleClick"></my-button>
</template>

<script>
import MyButton from "@/components/MyButton.vue";

export default {
  components: {
    MyButton
  },
  methods: {
    handleClick(info) {
      console.log("Click event on the button of the children with: " + info)
    }
  }
}
</script>

Si te fijas, en la vista HTML solo necesitas llamar al nombre del método, en otras palabras NO tienes que hacer esto:

<my-button text="Botón de ejemplo" @click="handleClick(info)"></my-button>

Conclusiones

Este artículo es muy corto porque los eventos no dan para más. Es algo muy simple de implementar y encima muy útil para la creación de los componentes si lo combinas con los props.

La única desventaja de los props y los eventos es que si por ejemplo tienes herencias más completas (hijos con más componentes hijos), tienes que pasar los props y los eventos hacia arriba y hacia abajo en la herencia, aunque ya veremos como solucionar esto con el store de Vue.