¿Cómo pasar datos o métodos desde un componente hijo a uno padre en Vue?

En Vue.js, el mecanismo de eventos se utiliza generalmente para transmitir datos o llamar a métodos desde un componente hijo hacia un componente padre.

El componente hijo puede enviar un evento con los datos necesarios usando $emit, y el componente padre escucha ese evento y responde a él.

Ejemplo:

<!-- Componente padre -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Datos del hijo:', payload);
    }
  }
}
</script>

<!-- Componente hijo -->
<template>
  <button @click="sendData">Enviar datos al padre</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: '¡Hola, padre!' });
    }
  }
}
</script>

De esta manera, el componente hijo no llama directamente a los métodos del padre, sino que informa sobre un evento, y el padre decide qué hacer con ello. Esto mantiene el principio de flujo de datos unidireccional y simplifica la gestión del estado.