Vue.js is een populair JavaScript-framework om interactieve webapplicaties te bouwen. Een van de krachtigste functies is vue js emit, waarmee een component events naar zijn parent stuurt. Deze uitgebreide gids laat je zien hoe je vue js emit in je Vue.js-code gebruikt.
Wat is Vue js emit?
$emit is de manier waarop Vue.js-componenten met elkaar praten. Je stuurt er events mee van het kind naar de ouder, en dat betekent dat je vanuit een childcomponent een actie in een parentcomponent kunt afvuren.
Waarom zou je het gebruiken?
emit is op zijn plek zodra je informatie of events van een childcomponent terug naar de parent moet duwen. Stel dat je een formulier in een childcomponent hebt en de formuliergegevens naar de parent wilt sturen om ze daar te verwerken: emit is precies wat je daarvoor nodig hebt.
Hoe gebruik je Vue js emit?
emit gebruiken is eenvoudig. Declareer eerst een event in je childcomponent met de methode $emit(). Een voorbeeld:
this.$emit('eventName', data)eventName is de naam van het event en data is de payload die je ermee meestuurt.
Vervolgens luister je in de parentcomponent naar dat event met de directive v-on:
<ChildComponent v-on:eventName="eventHandler"/>eventHandler is de methode die wordt aangeroepen zodra het event afgaat.
Een volledig voorbeeld van $emit
Hier is een volledig voorbeeld van emit in je Vue.js-code:
<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>In deze code hebben we een parentcomponent die een childcomponent bevat, `ChildComponent`. Klik je op de knop in de childcomponent, dan gaat het event `eventName` af met de data `‘Données envoyées depuis le composant enfant‘`. De parentcomponent luistert naar dat event met de directive `@eventName` en roept de methode `eventHandler` aan zodra het event afgaat.
Conclusie
Kortom, `emit` is een krachtige functie van Vue.js waarmee je events van een childcomponent naar een parentcomponent duwt. Het is eenvoudig in gebruik en een waardevol middel voor de communicatie tussen de componenten van je applicatie. Met deze complete gids zet je `emit` met vertrouwen in je Vue.js-code in.
