Eventos personalizados para componentes

Concluído

Elementos HTML podem gerar eventos com base na interação do usuário. Os componentes permitem que você faça a mesma coisa emitindo eventos. O componente pai pode lidar com esses eventos da mesma maneira que você adicionaria código para escutar um evento de clique para um botão.

Registrar eventos

Quando cria um componente, você registra os eventos que ele pode emitir listando-os no campo emits em script:

<!-- inside the component's vue file -->
<script>
export default {
    name: 'Demo',
    emits: ['userUpdated']
}
</script>

Emitir eventos

Você emite um evento usando a função $emit. Se quiser emitir um evento que um controle HTML gerou diretamente, você poderá executar esta operação embutida. Observe como você pode emitir o evento userUpdated registrando o manipulador de eventos click para um botão:

<!-- inside the component's vue file -->
<template>
    <button @click="$emit('userUpdated')">Save user</button>
</template>

Observação

Você está usando o atalho de @click, que normalmente é como você conecta manipuladores de eventos no Vue.

Às vezes, pode ser necessário executar mais etapas antes de emitir o evento. Se o componente precisar salvar o valor em um banco de dados antes de retornar quaisquer informações atualizadas, você poderá adicionar um método. Dentro do método, use this.$emit para gerar o evento, assim como antes:

<!-- inside the component's vue file -->
<template>
    <button @click="saveUser">Save user</button>
</template>
<script>
export default {
    name: 'UserDialog',
    emits: ['userUpdated'],
    methods: {
        saveUser() {
            // perform other operations
            this.$emit('userUpdated'); // emits event
        }
    }
}
</script>

Emitir eventos usando dados

O componente pode precisar retornar dados para o pai por meio de eventos. Você pode retornar qualquer dado passando outros parâmetros para $emit. Se quiser indicar que a atualização foi bem-sucedida retornando true, você poderá atualizar a chamada da seguinte maneira:

<button @click="$emit('userUpdated', true)">Save user</button>

Ou você pode usar um método:

methods: {
    saveUser() {
        // perform other operations
        this.$emit('userUpdated', true); // emits event
    }
}

Escutar eventos

Escutar um evento emitido por um componente é semelhante a escutar eventos gerados por controles HTML normais. Normalmente, você cria um método no componente pai e conecta o método ao evento usando a mesma sintaxe @<event-name> que usaria para @click ou outros eventos. Se o evento retornar dados, eles serão passados como parâmetros para a função.

Para adicionar um manipulador de eventos para o evento userUpdated criado anteriormente, você pode usar o código a seguir. Observe como o Vue.js será convertido de um nome em camelCase em um nome com o padrão de maiúsculas e minúsculas kebab.

<template>
<user-dialog @user-updated="handleUserUpdated"></user-dialog>
</template>
<script>
import UserDialog from './UserDialog.vue';
export default {
    methods: {
        handleUserUpdated(success) {
            if (success) {
                alert('It worked!!');
            } else {
                alert('Something went wrong');
            }
        }
    },
    components: {
        UserDialog
    }
}