O Vue.js é uma framework JavaScript popular para criar aplicações web interativas. Uma das suas funcionalidades mais poderosas é o vue js emit, que permite a um componente enviar eventos para o seu pai. Este guia detalhado explica-te como usar o vue js emit no teu código Vue.js.
O que é o Vue js emit?
$emit é um método de comunicação entre componentes Vue.js. Permite-te enviar eventos do filho para o pai, ou seja, desencadear uma ação num componente pai a partir de um componente filho.
Porquê usá-lo?
O emit é útil quando precisas de fazer subir informação ou eventos de um componente filho para o componente pai. Por exemplo, se tens um formulário num componente filho e queres enviar os dados desse formulário ao componente pai para ele os tratar, podes usar o emit para isso.
Como usar o Vue js emit?
Usar o emit é muito simples. Primeiro, declara um evento no teu componente filho com o método $emit(). Aqui fica um exemplo:
this.$emit('eventName', data)eventName é o nome do evento e data são os dados que queres enviar com ele.
Depois, ficas à escuta do evento no componente pai com a diretiva v-on:
<ChildComponent v-on:eventName="eventHandler"/>eventHandler é o método chamado quando o evento é despoletado.
Exemplo completo de utilização do $emit
Aqui fica um exemplo completo de como usar o emit no teu código Vue.js:
<template>
<div>
<ChildComponent @eventName="eventHandler"/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
eventHandler (data) {
console.log(data)
}
}
}
</script>
// ChildComponent.vue
<template>
<button @click="sendData">Envoyer les données</button>
</template>
<script>
export default {
methods: {
sendData () {
this.$emit('eventName', 'Données envoyées depuis le composant enfant')
}
}
}
</script>Neste código temos um componente pai que inclui um componente filho `ChildComponent`. Quando clicas no botão do componente filho, o evento `eventName` é despoletado com os dados `‘Données envoyées depuis le composant enfant‘`. O componente pai fica à escuta desse evento com a diretiva `@eventName` e chama o método `eventHandler` quando o evento acontece.
Conclusão
Em conclusão, o `emit` é uma funcionalidade poderosa do Vue.js que te permite fazer subir eventos de um componente filho para um componente pai. É fácil de usar e pode revelar-se uma ferramenta valiosa para a comunicação entre componentes da tua aplicação. Com este guia completo, deves conseguir usar o `emit` com confiança no teu código Vue.js.
