Los Props en Vue sirven para pasar información desde un componente padre a un componente hijo, pues bien, los eventos es al contrario, sirven para notificar desde el hijo al padre.
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.
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, eVue JS ≫ s 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, eso quiere decir que podemos estar a la escucha desde el padre usando los Eventos de click en Vue 🚧.
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
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.