[Dúvida] adicionar-ingrediente | Vue 3: entendendo componentes, diretivas e reatividade no framework

No elemento pai recebemos o evento do elemento filho, e a nomenclatura da propriedade que recebe o evento ficou com "adicionar-ingrediente", tanto que foi uma sugestão de auto complete do visual studio. Eu só não entendi o porque que ficou com esse nomenclatura se a gente definiu no filho como "adicionarIngrediente" no elemento filho.

Podemos alterar o nome dessa propriedade "@adicionar-ingrediente" ou tem que ser esse nome por algum motivo?

elemento filho: methods:{ aoClicar(){ this.selecionado = !this.selecionado;

    if(this.selecionado){
        this.$emit('adicionarIngrediente', this.ingrediente);
    }
}

}, emits: ['adicionarIngrediente']

Elemento pai: <IngredienteSelecionavel :ingrediente="ingrediente" @adicionar-ingrediente="$emit('adicionarIngrediente', $event)"/>

Oii, Antonio. Tudo bem?

No Vue, os eventos personalizados que são emitidos pelo filho podem ser escutados pelo componente pai usando a sintaxe @nome-do-evento.

O Vue segue a convenção de transformar nomes de eventos camelCase para kebab-case no HTML. Isso acontece porque o HTML não é case sensitive. Ou seja, adicionarIngrediente no componente filho se torna adicionar-ingrediente no componente pai.

E, sim, você pode alterar o nome da propriedade, mas o nome que você estiver usando o nome deve ser o conforme definido no componente filho. Por exemplo, se no componente filho você emitir o evento como adicionarIngrediente, no componente pai você deve escutar esse evento como @adicionar-ingrediente.

No seu exemplo está certinho! :)

Se outra dúvida surgir, estamos por aqui.

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.