Maison > interface Web > js tutoriel > Centre d'événements global Bus en vue (tutoriel détaillé)

Centre d'événements global Bus en vue (tutoriel détaillé)

亚连
Libérer: 2018-06-04 14:36:35
original
3747 Les gens l'ont consulté

ue-bus fournit un centre d'événements global et l'injecte dans chaque composant. Vous pouvez utiliser les événements globaux aussi facilement qu'en utilisant le flux d'événements intégré. Cet article vous présente une démo simple du centre d'événements global vue bus. Les amis qui en ont besoin peuvent s'y référer

1 Après avoir construit le projet avec vue-cli, utilisez npm pour installer vue-bus

 npm install vue-bus

2. Inscrivez-vous globalement

 import Vue from 'vue';
 import VueBus from 'vue-bus';
 Vue.use(VueBus);
Copier après la connexion

3. 🎜>

4. Recevoir des données :
this.$bus.emit("eventName",data)
Copier après la connexion

5. la portée de ceci doit pointer vers l'instance de machine virtuelle actuelle. L'événement d'écoute est généralement placé dans la fonction de cycle de vie du composant. La désinscription du bus doit être dans beforeDestroy ; times Le problème, d'une part, peut être dû au fait que le composant Vue est réutilisé, provoquant l'enregistrement répété d'un événement de bus, détruisant le bus "même nom d'événement", la seule relation correspondante entre l'envoi et la réception
this.$bus.on("eventName",data)
Copier après la connexion
Par contre, lors du routage de page, l'événement de bus dans la page d'origine n'a pas été déconnecté et est toujours masqué dans le programme.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Méthodes de mise à jour $set et tableau dans vue.js_vue.js

JQuery select select La valeur La méthode du composant sélectionné

vue est combinée avec vue-i18n pour implémenter la méthode de commutation multilingue des données d'arrière-plan


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal