Vue.JS emite eventos personalizados

Vue.JS es un marco versátil y completo para construir grandes aplicaciones web. Cualquier aplicación web se divide en los componentes. Por ejemplo, un sitio web simple que incluye un encabezado, barra lateral y algunos otros componentes. Para administrar y manejar este enfoque basado en componentes, Vue.JS ofrece la relación padre-hijo entre los componentes y si queremos enviar algunos datos a través de los componentes. Vue.JS ofrece accesorios para enviar datos del padre a un componente infantil pero enviar datos del niño al padre; Tenemos que emitir eventos personalizados. En este artículo, aprendemos sobre disparar y escuchar eventos personalizados.En primer lugar, veamos cómo despedir un evento personalizado en Vue.JS y luego cómo escuchar ese evento. La sintaxis para disparar un evento en Vue.JS es esto.$ emit ('EventName')

En esta sintaxis, debemos tener cuidado al dar un nombre al evento porque usar el mismo nombre; Más tarde escucharemos este evento. Para escuchar este evento, podemos escucharlo mientras escuchamos un evento de clic en Vue.js. Por ejemplo

Podemos escribir cualquier expresión en las comas invertidas, así como una función. Así que intentemos un ejemplo para entenderlo mejor.

Ejemplo

Supongamos que tenemos un componente llamado "ParentComponent", que incluye un componente infantil con el nombre de "ChildComponent" al que estamos pasando un mensaje usando accesorios.

En el componente infantil, estamos recibiendo accesorios y mostrando el mensaje en la etiqueta 'P'.

Ahora después de que se configuren estos dos componentes. Vamos a saludar a nuestro componente de padres. Para volver a saludar, primero crearemos un botón, y al hacer clic en ese botón, llamaremos a la función "Helloback". Después de crear el botón, el HTML del componente infantil sería así

Creemos la función "HellobackFunc" en el objeto Métodos también. En el que emitiremos el "Hellobackevent" junto con una variable "Hellobackvar" que contiene la cadena "Hola Padre". Después de crear una función, el JavaScript del componente infantil sería así

Hemos terminado disparando el evento. Ahora, pasemos al componente principal para escuchar el evento.

En el componente principal, simplemente podemos escuchar el evento, al igual que escuchamos el evento de clics. Simplemente escucharemos el evento en la etiqueta del componente infantil y llame a la función "gracias ()".