Vue.JS émet des événements personnalisés

Vue.JS est un cadre 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 basée sur les composants, Vue.JS offre la relation parent-enfant entre les composants et si nous voulons envoyer des données sur des 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 à tirer et à écouter des événements personnalisés.Tout d'abord, voyons comment licencier un événement personnalisé à Vue.JS et puis comment écouter cet événement. La syntaxe pour virer un événement en Vue.JS est-ce.$ émit ('Eventname')

Dans cette syntaxe, nous devons être prudents tout en donnant un nom à l'événement en utilisant le même nom; Nous écouterons plus tard cet événement. Afin d'écouter cet événement, nous pouvons l'écouter pendant que nous écoutons un événement de clic dans Vue.js. Par exemple

Nous pouvons écrire n'importe quelle expression dans les virgules inversées 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.

Dans le composant enfant, nous obtenons des accessoires et affichons le message dans la balise «P».

Maintenant après avoir mis en place ces deux composants. Disons bonjour à notre parentComponent. Afin de dire bonjour, nous allons d'abord créer un bouton, et en cliquant sur ce bouton, nous appellerons la fonction «Helloback». Après avoir créé le bouton, le HTML du composant enfant serait comme ça

Créons également la fonction «hellobackfunc» dans l'objet méthodes. Dans lequel nous émettrons la «Hellobackevent» avec une variable «hellobackvar» qui contient la chaîne «Bonjour parent». Après avoir créé une fonction, le javascript du composant enfant serait comme ça

Nous avons fini de tirer l'événement. Maintenant, passons 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 de ChildComponent et appeler la fonction «Merci ()» dessus.