Como passar dados ou métodos de um componente filho para um componente pai no Vue?

No Vue.js, o mecanismo de eventos é geralmente utilizado para transmitir dados ou chamar métodos do componente filho para o componente pai.

O componente filho pode enviar um evento com os dados necessários usando $emit, e o componente pai escuta esse evento e reage a ele.

Exemplo:

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

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Dados do filho:', payload);
    }
  }
}
</script>

<!-- Componente filho -->
<template>
  <button @click="sendData">Enviar dados ao pai</button>
</template>

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

Dessa forma, o componente filho não chama diretamente os métodos do pai, mas informa sobre um evento, e o pai decide o que fazer com ele. Isso mantém o princípio de fluxo de dados unidirecional e simplifica a gestão do estado.