¿Qué hace el método $emit en Vue.js?

El método $emit se utiliza para generar eventos personalizados desde un componente hijo. Es la forma principal en que un componente hijo interactúa con su componente padre en Vue, en un flujo de datos unidireccional. Permite que el componente hijo notifique al padre que ocurrió un evento y, si es necesario, le pase datos.

Principio de funcionamiento:

1. En el componente hijo, se llama a $emit('nombreDelEvento', payload).
   • nombreDelEvento - cadena, nombre del evento que se generará.
   • payload (opcional) - cualquier dato que se quiera pasar al componente padre.
2. En el componente padre, al usar el componente hijo, se escucha este evento con la directiva v-on o la forma abreviada @.
3. Cuando el evento con el nombre especificado es generado por el componente hijo, se ejecuta el manejador correspondiente en el componente padre.

Ejemplo:

Componente hijo (ChildComponent.vue):

<template>
  <button @click="handleClick">Haz clic en mí</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Genera el evento 'buttonClicked' sin payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Componente padre (ParentComponent.vue):

<template>
  <!-- Escuchamos el evento 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Este método se ejecutará cuando el componente hijo genere 'buttonClicked'
      console.log('¡El botón en el componente hijo fue presionado!');
    }
  }
}
</script>

$emit permite mantener el principio de flujo de datos unidireccional, evitando cambios directos en el estado del padre desde el componente hijo. El componente hijo solo señaliza que algo ocurrió, y la gestión y modificación del estado se realiza en el componente padre.