Phenquestions
Vue.js est un framework polyvalent et à part entière pour créer d'énormes applications Web. Toute application Web est divisée en composants. Par exemple, un site Web simple qui comprend un en-tête, une barre latérale et d'autres composants. Afin de gérer et de gérer cette approche à base de composants, Vue.js offre la relation parent-enfant entre les composants et si nous voulons envoyer des données entre les composants. Vue.js propose des accessoires pour envoyer des données du parent à un composant enfant mais pour envoyer des données de l'enfant au parent ; nous devons émettre des événements personnalisés. Dans cet article, nous apprenons à déclencher et à écouter des événements personnalisés.Tout d'abord, voyons comment déclencher un événement personnalisé dans Vue.js et ensuite comment écouter cet événement. La syntaxe pour déclencher un événement dans Vue.js est
cette.$emit('eventName')Dans cette syntaxe, il faut être prudent en donnant un nom à l'événement car utiliser le même nom ; nous écouterons plus tard cet événement. Pour écouter cet événement, nous pouvons l'écouter comme nous écoutons un événement de clic dans Vue.js. Par example
On peut écrire n'importe quelle expression entre guillemets ainsi qu'une fonction. Alors essayons un exemple pour mieux le comprendre.
Exemple
Supposons que nous ayons un composant nommé "parentComponent", qui inclut un composant enfant avec le nom de "childComponent" auquel nous passons un message à l'aide d'accessoires.
Composant parent
Composant enfant
Dans le composant enfant, nous obtenons des accessoires et affichons le message dans la balise 'p'.
msg
Maintenant, après avoir configuré ces deux composants. Dites bonjour à notre ParentComponent. Afin de dire bonjour, nous allons d'abord créer un bouton, et au clic de ce bouton, nous appellerons la fonction "helloBack". Après avoir créé le bouton, le code HTML du composant enfant ressemblerait à ceci
un message
Créons également la fonction "helloBackFunc" dans l'objet méthodes. Dans lequel nous émettrons le "helloBackEvent" avec une variable "helloBackVar" qui contient la chaîne "Hello Parent". Après avoir créé une fonction, le javascript du composant enfant serait comme ceci
Nous avons terminé avec le tir de l'événement. Passons maintenant au composant parent pour écouter l'événement.
Dans le composant Parent, nous pouvons simplement écouter l'événement, tout comme nous écoutons l'événement click. Nous allons simplement écouter l'événement dans la balise du ChildComponent et appeler la fonction "thanks()" dessus.
Dans la fonction de remerciement, nous affecterons la chaîne passée à la variable nommée "thanksMessage". Après avoir créé la fonction et affecté la chaîne passée à la variable, le javascript du "parentComponent" serait comme ceci
Et liez la variable "thanksMessage" dans le modèle quelque part pour voir si cela fonctionne ou non.
Composant parent
MerciMessage
Composant enfant
Après avoir créé et écrit tout ce code, allez sur la page Web et rechargez-la pour obtenir les dernières fonctionnalités.
Nous pouvons voir que les accessoires sont transmis avec succès au composant enfant. Maintenant, si nous cliquons sur le bouton, qui est en fait dans le composant enfant. Le message de remerciement doit s'afficher juste après l'en-tête du composant parent.
Comme vous pouvez le voir, il est affiché.
Donc, voici comment nous pouvons émettre ou déclencher les événements personnalisés et les écouter dans un autre composant de Vue.js.
Résumé
Dans cet article, nous avons appris à émettre des événements personnalisés dans le Vue.js. Cet article contient un exemple étape par étape pour le comprendre avec une brève explication avec elle. Nous espérons donc que cet article vous aidera à avoir des concepts meilleurs et clairs d'émission d'événements personnalisés dans Vue.js. Pour plus de contenu aussi utile, continuez à visiter linuxhint.com
