Eventos personalizados para componentes
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
}
}