O que faz o método $emit no Vue.js?

O método $emit é usado para gerar eventos personalizados a partir de um componente filho. É a principal forma de interação do componente filho com o componente pai em Vue, num fluxo de dados unidirecional. Permite que o componente filho notifique o pai de que um evento ocorreu e, se necessário, envie-lhe dados.

Princípio de funcionamento:

1. No componente filho, chama-se $emit('nomeDoEvento', payload).
   • nomeDoEvento - string, nome do evento que será gerado.
   • payload (opcional) - quaisquer dados que se queira passar ao componente pai.
2. No componente pai, ao usar o componente filho, escuta-se esse evento com a diretiva v-on ou a forma abreviada @.
3. Quando o evento com o nome especificado é gerado pelo componente filho, o manipulador correspondente no pai é executado.

Exemplo:

Componente filho (ChildComponent.vue):

<template>
  <button @click="handleClick">Clique em mim</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Gera o evento 'buttonClicked' sem payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Componente pai (ParentComponent.vue):

<template>
  <!-- Escutamos o evento 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Este método será executado quando o componente filho gerar 'buttonClicked'
      console.log('O botão no componente filho foi pressionado!');
    }
  }
}
</script>

$emit permite manter o princípio de fluxo de dados unidirecional, evitando alterações diretas no estado do pai pelo componente filho. O componente filho apenas sinaliza que algo aconteceu, e o processamento e alteração do estado ocorrem no componente pai.