Les événements dans VueJs : s’y abonner et en déclencher
Un événement est une chose qui se produit et dont on peut être mis au courant en s’y abonnant.
Exemple : l’événement “click” sur un contrôle de type “button” par exemple: en s’y abonnant, on sera prévenu que l’utilisateur a cliqué sur le bouton en question. Pour se faire, on va lier une fonction à cet événement et c’est cette fonction qui sera exécutée lors du clique sur le bouton. Ainsi, on peut effectuer une action sur base d’un événement.
Mais on peut également créer un événement sur un composant et le déclencher quand bon nous semble selon une action ou condition particulière. Ainsi, celui qui utilise notre composant pourra lui-aussi s’abonner à cet événement.
S’abonner à un événement simple
Prenons un exemple simple : on a dans notre composant principal un bouton et quand on clique dessus, on veut afficher une petite alerte “bonjour”. Voici à quoi ressemblera le code:
<template>
<div id="app">
<input type="button" v-on:click="showAlert('bonjour')" value="Bonjour" />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
showAlert() {
alert("Bonjour");
}
}
}
</script>On voit notre bouton : <input type=”button”… v-on:click -> ce v-on:click représente l’événement “click” et peut aussi être noté @click.
Ainsi, pour afficher une alerte javascript, on va lier notre événement “click” à une méthode “showAlerte” qui est dans la partie “script” de VueJs. Dans cette méthode “showAlerte”, on va simplement faire notre alert(“Bonjour”) pour afficher une alerte contenant le message “Bonjour”.
Créer un événement sur base d’un autre
Imaginons maintenant qu’on veuille déclencher un événement depuis un sous-composant.
Première étape : créer un sous-composant. Si vous ne savez pas comment, vous pouvez lire l’article concernant cette partie en cliquant ici.
Maintenant que vous avez votre second composant, vous pouvez y ajouter par exemple un élément “p” sur lequel vous voulez déclencher un événement “click” quand vous cliquez dessus. Voici à quoi ça ressemble :
<template>
<div>
<p @click="$emit('click')">Cliquez ici</p>
</div>
</template>Vous voyez ici qu’on s’abonne à l’événement “click” de l’élément “p” via @click. Sur le click on émet un nouvel événement pour le composant2 vers le parent ($emit(“_nom_evenement_”)) et ce nouvel événement s’appelle lui-aussi “click”. Ainsi, dans notre composant principal, on peut s’abonner à cet événement “click” pour afficher notre alert. Voici le code de notre App.vue :
<template>
<div id="app">
<comp2 v-on:click="showAlert('bonjour')" />
</div>
</template>Vous pouvez voir ici qu’on s’abonne à l’événement de notre nouveau composant comp2. C’est bien l’événement “click” de comp2 auquel on s’abonne.
Créer un événement sur base d’une condition
Imaginons un cas plus complexe : notre second composant contiendrait une textbox et quand on change le nombre dedans, si celui passe de négatif à positif, on renvoi un événement positiveNegativeChanged(isPositive=true) sinon on renvoi un événement positiveNegativeChanged(isPositive=false).
Voici le code de notre composant 2 :
Au niveau TEMPLATE:
<template>
<div>
<input v-model="textValue" type="text" @keyup="onTextChanged"/>
</div>
</template>Dans notre template, on lie la valeur de notre champ à une variable “textValue” de notre modèle VueJs et à chaque touche relâchée (@keyup), on appelle la méthode VueJs onTextChanged qui va vérifier si on passe d’une valeur qui était positive à une valeur négative ou inversement. Dans ce cas, on déclenchera un événement sur notre composant. Voici le code de la partie SCRIPT de notre composant :
<script>
export default {
data() {
return {
isPositive: null,
textValue: null
}
},
methods: {
onTextChanged: function() {
if (this.textValue >= 0 && this.isPositive != true)
{
this.isPositive = true;
this.$emit("isPositiveNegativeChanged", this.isPositive);
}
else if (this.textValue < 0 && this.isPositive != false)
{
this.isPositive = false;
this.$emit("isPositiveNegativeChanged", this.isPositive);
}
}
}
}
</script>On peut donc voir qu’on crée une variable dans la partie DATA qui s’appelle isPositive. Cette valeur va servir à savoir si la dernière valeur testée était positive ou négative et ainsi à émettre un événement si cet état a changé.
Pour se faire, on va l’initialiser à NULL ainsi, peu importe que la première valeur soit positive ou négative, on va déclencher notre événement.
Si vous vous souvenez de la partie TEMPLATE, à chaque touche du clavier relâchée (donc à chaque changement de valeur), on appelle onTextChanged.
Dans cette méthode, on peut voir qu’on fait donc le test de savoir si la valeur actuelle (stockée dans notre modèle) est bien passée de positive à négative ou inversement et en fonction de cela, on déclenche notre événement isPositiveNegativeChanged via this.$emit(“_nom_de_evenement_”, _param_);
Du côté de notre composant principal App.vue, c’est comme pour tout événement, on s’y abonne comme suit :
<comp2 @isPositiveNegativeChanged="onPositiveNegativeChanged" />Reste après à ajouter dans la partie SCRIPT une méthode onPositiveNegativeChanged qui va faire par exemple une ALERT :
methods: {
onPositiveNegativeChanged(isPositive) {
if (isPositive)
{
alert("Le nombre est devenu positif");
}
else
{
alert("Le nombre est devenu négatif");
}
}Conclusion
Vous voyez donc que les événements sont assez simple. Vous pouvez les déclencher simplement avec this.$emit et vous y abonner comme à n’importe quel événement.
J’espère que cet article vous aura plu. N’hésitez pas à laisser un commentaire ou à vous enregistrer sur ce blog pour ne rien manquer. Si vous souhaitez bénéficier d’une formation de base GRATUITE, n’hésitez pas non plus à encoder votre email ci-dessous pour me dire à quelle adresse mail je peux vous l’envoyer. Merci d’avoir lu cet article à très bientôt sur le blog developpement-web-facile.com.
