Event handling in Vue.js
Wanneer je een dynamische website bouwt met Vue.js, wil je waarschijnlijk dat deze kan reageren op events. Als een gebruiker bijvoorbeeld op een knop klikt, een formulier verzendt of zelfs maar met zijn muis beweegt, wil je misschien dat jouw Vue-site op de een of andere manier reageert.
Vue.js maakt de communicatie tussen een child en parent component gemakkelijk met de $emit en v-on functies. Hierdoor kan je de communicatie tussen deze onderdelen in een hiërarchie gemakkelijk en eenvoudig beheren.
Je kunt dus voor de v:on gebruik maken van een aantal standaard type events, zoals;
- Click
- Submit
- Keyup
- Drag
- Scroll
En nog een standaard event types.
Hieronder kun je zien dat je een method ‘clickHandler’ laat functioneren wanneer er een click wordt gezet op de button.
<div id="app">
<button v-on:click="clickHandler"></button>
</div>
new Vue({
el: "#app",
methods: {
clickHandler () {
console.log("Hier heb jij geklikt");
}
}
})Hierboven hebben we het alleen nog over het afhandelen van native events. Maar omdat Vue.js component gebaseerd is kunnen we ook eigen componenten ‘emitten’ uitstoten.
Laten we dus een child component een event sturen welk de parent kan ontvangen. Om dit te doen maken we een dialog component waar de volgende emit functie in staat;
export default {
methods: {
onClose() {
this.$emit("dialog-closed");
}
}
};Hiermee hebben we op een onClose event een emit functie gemaakt, genaamd; ‘dialog-closed’.
Nu kunnen we op de pagina die boven het component leeft het volgende doen;
<div>
<dialog-component @dialog-closed="eventHandler" />
</div>Hiermee is dialog-closed hetzelfde als een native event. En kunnen we dezelfde console.log als hierboven doen op de volgende manier.
new Vue({
el: "#app",
methods: {
eventHandler () {
console.log("Hier heb jij een dialog gesloten");
}
}
})
