Cómo emitir eventos para comunicarse entre los componentes de Vue

La estructuración de sus aplicaciones web utilizando una arquitectura de componentes facilita la creación y el mantenimiento de su aplicación.

Emitir eventos personalizados es una forma de manejar la comunicación entre componentes; accesorios y tragamonedas son otros dos. Los eventos personalizados le permiten enviar datos del componente secundario al componente principal.

Emitir eventos de un hijo a su padre

Vue ofrece muchas opciones para comunicarse entre componentes. Una forma significativa de la comunicación entre los componentes es a través de props. Los accesorios le permiten enviar datos de componentes principales a secundarios.

¿Qué sucede entonces si desea enviar datos del elemento secundario al componente principal? Vue le permite emitir eventos personalizados de componentes secundarios a principales. Este proceso permite que el componente principal use datos y funciones del componente secundario.

Por ejemplo, imagine un componente de botón con una función que devuelve un valor con cada clic. Deberá emitir ese evento al componente principal para permitir que el componente principal actualice su estado o realice una acción basada en el valor devuelto.

Convención de nomenclatura para eventos emitidos personalizados en Vue

Antes de profundizar en cómo emitir eventos personalizados, debe comprender la convención de nomenclatura para eventos personalizados en Vue. Antes de que surgiera Vue 3, los desarrolladores tenían estrictamente que definir eventos personalizados con caja de kebab, separando palabras en nombres con un carácter de guión.

Ahora es una práctica estándar definir sus eventos personalizados en kebab-case cuando trabaja con plantillas HTML, y el caso de Carmel cuando se trabaja con JavaScript. Sin embargo, puede optar por utilizar cualquier opción cuando trabaje con JavaScript, ya que Vue compila todos los eventos personalizados en el caso de kebab.

Cuando emita un evento personalizado, transmita el propósito del evento con un nombre descriptivo. Esto es muy importante, especialmente cuando se trabaja en equipo, para dejar claro el propósito del evento.

Cómo emitir eventos personalizados desde el componente secundario al principal

Hay dos formas de lograr la emisión de eventos personalizados en Vue. Puede emitir eventos personalizados en línea (directamente en la plantilla de Vue) con el $emitir método que proporciona Vue. También puede hacer uso de la defineEmits macro disponible de Vue 3.

Emitir eventos personalizados en Vue con el método $emit

$emitir, un método integrado de Vue, permite que un componente secundario envíe un evento a su componente principal. Llama a este método en línea (dentro de la plantilla del componente secundario) para activar el evento personalizado. El método $emit toma dos argumentos: el nombre del evento que desea emitir y una carga útil opcional que puede transportar datos adicionales.

Considere este componente secundario que emite un evento para notificar al componente principal sobre el clic de un botón:

 ChildComponent.vue 
<guionconfiguración>
importar {ref} de 'vue';
publicación constante = ref('')
guion>
<plantilla>
<división>
<aportetipo="texto"modelo v="correo">
<botónactivado: haga clic="$emit('botón-clic', publicación)">Correobotón>
división>
plantilla>

Este bloque de código muestra cómo emitir un evento personalizado desde un componente secundario. El niño comienza inicializando una variable de publicación con una cadena vacía.

El componente secundario luego vincula el elemento de entrada a la variable de publicación con v-model, un Directiva de enlace de datos de Vue. Este enlace permite que los cambios que realice en el campo de entrada actualicen la variable de publicación automáticamente.

El elemento de botón tiene una directiva v-on que escucha los eventos de clic en el botón. El clic del botón llama al método $emit con dos argumentos: el nombre del evento, "botón-clic" y el valor de la variable de publicación.

El componente principal ahora puede escuchar el evento personalizado con la directiva v-on para manejo de eventos en Vue:

 ParentComponent.vue 
importar {ref} de "vue";
importar ChildComponent desde "./components/ChildComponent.vue";
const postList = ref([])
const addPosts = (publicación) => {
 postList.value.push (publicación)
}
guion>
<plantilla>
<división>
<ChildComponent @botón-clic="añadirPublicaciones"/>
<ul>
<liv-para="publicar en la lista de publicaciones">{{ correo }}li>
ul>
división>
plantilla>

Este bloque de código muestra un componente principal importando y usando el componente secundario anterior. El componente principal define un postLista variable de matriz como una referencia reactiva. A continuación, el componente define un añadirPublicaciones función que se ejecuta, tomando un correo argumento. La función agrega una nueva publicación a la matriz postList con el empujar() método.

El @botón-clic el detector de eventos captura el evento personalizado que ChildComponent emite al hacer clic en el botón. Este evento hace que se ejecute la función addPosts. Finalmente, el bloque de código adjunta el v-para directiva para listas de renderizado en Vue al elemento ul para iterar sobre la matriz postList.

Emitir eventos con la macro defineEmits

Vue 3 introdujo el defineEmits macro, que define explícitamente los eventos que puede emitir un componente. Esta macro proporciona una forma segura de emitir eventos que conducen a una base de código más estructurada.

Aquí hay un ejemplo de cómo puede usar la macro defineEmits y llamarla en su componente secundario:

 ChildComponent.vue 
<guionconfiguración>
importar {ref} de "vue";
const emit = defineEmits(["botón-clic"]);
publicación constante = ref("");
const buttonClick = () => {
 emit("botón-clic", post.value);
};
guion>
<plantilla>
<división>
<aportetipo="texto"modelo v="correo" />
<botónactivado: haga clic="botónClic">Correobotón>
división>
plantilla>

Si bien la funcionalidad sigue siendo la misma, existen diferencias significativas en la sintaxis del código entre el bloque de código anterior y el que tiene el $emitir función.

En este bloque de código, el defineEmits macro define el botón-clic evento. Al llamar a esta macro, el bloque de código devuelve una función $emit, que le permite emitir los eventos definidos. La matriz pasada a la macro defineEmits dentro del componente contendrá todos los eventos que necesita emitir al componente principal.

A continuación, el bloque de código define un botónClic función. Esta función emite el evento de clic del botón y la variable de publicación al componente principal. El bloque de plantilla del componente secundario alberga un elemento de botón.

El elemento de botón tiene un activado: haga clic directiva que activa la función buttonClick. El componente principal puede usar el componente secundario de la misma manera que lo hizo con el método $emit.

Los desarrolladores de Vue se benefician de una arquitectura basada en componentes

Puede comunicarse desde un componente secundario a su componente principal mediante la emisión de eventos mediante el método $emit y la macro defineEmits.

Puede beneficiarse de la arquitectura basada en componentes de Vue, ya que le permite escribir código más estructurado y conciso. Con marcos JavaScript modernos como Vue, puede usar componentes web, un estándar web W3C, para lograr esta arquitectura basada en componentes.