Phenquestions
Vue.js es un marco versátil y completo para crear grandes aplicaciones web. Cualquier aplicación web se divide en Componentes. Por ejemplo, un sitio web simple que incluye un encabezado, una barra lateral y algunos otros componentes. Para gestionar 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 hijo, pero para enviar datos del hijo al padre; tenemos que emitir eventos personalizados. En este artículo, aprendemos sobre cómo disparar y escuchar eventos personalizados.En primer lugar, veamos cómo disparar 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 darle un nombre al evento porque usamos el mismo nombre; luego 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 entre comillas, así como una función. Intentemos un ejemplo para entenderlo mejor.
Ejemplo
Supongamos que tenemos un componente llamado "parentComponent", que incluye un componente secundario con el nombre de "childComponent" al que le estamos pasando un mensaje usando props.
Componente principal
Componente hijo
En el componente hijo, obtenemos accesorios y mostramos el mensaje en la etiqueta 'p'.
msg
Ahora, después de haber configurado estos dos componentes. Saludamos de nuevo a nuestro ParentComponent. Para decir hola de nuevo, 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 secundario sería así
mensaje
Vamos a crear la función "helloBackFunc" en el objeto de métodos también. En el cual emitiremos el "helloBackEvent" junto con una variable "helloBackVar" que contiene la cadena "Hello Parent". Después de crear una función, el javascript del componente hijo sería así
Terminamos de disparar 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 clic. Simplemente escucharemos el evento en la etiqueta ChildComponent y llamaremos a la función "thanks ()" en él.
En la función de agradecimiento, asignaremos la cadena pasada a la variable llamada "thanksMessage". Después de crear la función y asignar la cadena pasada a la variable, el javascript del "parentComponent" sería así
Y enlaza la variable "thanksMessage" en la plantilla en algún lugar para ver si funciona o no.
Componente principal
thanksMessage
Componente hijo
Después de crear y escribir todo este código, vaya a la página web y vuelva a cargarlo para obtener las últimas funcionalidades.
Podemos ver que los accesorios se transmiten correctamente al componente secundario. Ahora, si hacemos clic en el botón, que en realidad está en el componente secundario. El mensaje de agradecimiento debe aparecer justo después del encabezado del componente principal.
Como puede ver, se muestra.
Entonces, así es como podemos emitir o disparar los eventos personalizados y escucharlos en algún otro componente en Vue.js.
Resumen
En este artículo, hemos aprendido a emitir eventos personalizados en Vue.js. Este artículo contiene un ejemplo adecuado paso a paso para entenderlo con una breve explicación junto con él. Por lo tanto, esperamos que este artículo ayude a tener conceptos mejores y claros sobre la emisión de eventos personalizados en Vue.js. Para obtener más contenido útil, siga visitando linuxhint.com
