Tutoriel de base VUE3 : utilisation du bus d'événements Vue.js

Vue.js est un framework JavaScript frontal populaire, et son bus d'événements existe comme l'une de ses fonctions principales. Dans Vue.js, le bus d'événements agit comme un moyen de communication entre les composants. Cet article vous présentera comment utiliser le bus d'événements de Vue.js.

Qu'est-ce que le bus événementiel ?

Le bus événementiel est une implémentation du modèle de bus événementiel central. En termes simples, le bus d'événements est une instance Vue globale que nous pouvons utiliser n'importe où dans notre application. Il agit comme un moyen de communication entre les composants.

Vue.js monte le bus d'événements sur Vue.prototype, ce qui signifie qu'il fait partie de l'instance Vue, vous pouvez donc l'utiliser n'importe où dans votre application.

Comment mettre en place un bus événementiel ?

Configurer un bus d'événements est aussi simple que de le déclarer dans une nouvelle instance Vue. Dans votre fichier main.js, vous pouvez ajouter le code suivant :

Vue.prototype.$bus = new Vue();

Cette ligne de code instancie une instance Vue et la monte sur Vue.prototype, en la faisant partie de l'instance Vue. Désormais, vous pouvez utiliser $bus dans n'importe quel composant.

Comment envoyer des messages entre composants ?

L'envoi de messages entre composants est très simple grâce au bus d'événements. Il vous suffit d'envoyer le message dans un composant et d'écouter le message dans un autre composant. Regardons un exemple :

// 组件 A
this.$bus.$emit('message', 'hello from A');

// 组件 B
this.$bus.$on('message', message => {
  console.log(message); // hello from A
});

Dans le composant A, nous utilisons la méthode $emit pour envoyer un message 'message' avec les données 'bonjour de A'. Dans le composant B, nous utilisons la méthode $on pour écouter le message « message » et traiter le message dans la fonction de rappel.

Il est à noter que lorsque le composant est détruit, l'écouteur d'événements doit être supprimé à l'aide de la méthode $off pour éviter les fuites de mémoire.

Comment utiliser le bus événementiel dans l'application ?

Maintenant que vous savez mettre en place un bus d'événements et envoyer des messages entre composants, comment l'utilisez-vous dans votre application ? Voici un exemple simple :

// App.vue
<template>
  <div>
    <router-view />
    <button @click="sendMessage">Send message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('message', 'hello from App');
    }
  }
};
</script>

// Home.vue
<template>
  <div>
    <h1>Welcome Home</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$bus.$on('message', message => {
      this.message = message;
    });
  }
};
</script>

Dans cet exemple, nous avons défini un bouton dans App.vue qui envoie un message "message". Dans Home.vue, nous utilisons la méthode $on pour écouter le message 'message' et afficher le message sur la page.

Résumé

Le bus d'événements est une fonctionnalité très importante de Vue.js qui peut vous aider à établir la communication entre les composants. En utilisant les méthodes $emit et $on, vous pouvez facilement transmettre des messages entre les composants. N'oubliez pas d'utiliser la méthode $off pour supprimer les écouteurs d'événements lorsque le composant est détruit afin d'éviter les problèmes de fuite de mémoire. J'espère que cet article vous sera utile, merci d'avoir lu !

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!