Emit

El método emit se utiliza para disparar eventos de un componente hijo a un componente padre, permitiendo la comunicación de datos entre ellos.

Ejemplo: Comunicación entre un componente hijo y su padre

ChildComponent.vue

<script setup>
import { defineEmits } from "vue";

// Definir los eventos que este componente puede emitir
const emit = defineEmits(["handleClick"]);

function handleClick() {
  emit("handleClick", { message: "Hola desde el componente hijo!" });
}
</script>

<template>
  <button @click="handleClick">Emitir Evento</button>
</template>

ParentComponent.vue

<script setup>
import ChildComponent from "./ChildComponent.vue";

function handleCustomEvent(payload) {
  console.log("Evento recibido del hijo:", payload);
}
</script>
<template>
  <ChildComponent @handleClick="handleCustomEvent" />
</template>