Comment utiliser les mixins pour la communication des composants dans Vue ?

Comment utiliser les mixins pour la communication des composants dans Vue ?

Dans Vue, la communication entre les composants est un sujet très important. Il permet de partager les données, les méthodes et la logique entre différents composants afin de mieux réaliser la réutilisation et le fractionnement des composants. Vue fournit un mécanisme appelé mixins pour faciliter la communication entre les composants.

Tout d’abord, nous devons comprendre ce que sont les mixins. Les mixins sont des objets réutilisables qui contiennent des options dans lesquelles les composants peuvent être mélangés. Lorsqu'un composant utilise des mixins, ses options seront mélangées aux options du composant. Cela signifie que les mixins peuvent fournir des données, des méthodes et une logique supplémentaires au composant pour améliorer les fonctionnalités du composant.

Pour démontrer l'utilisation des mixins, nous pouvons créer deux composants simples, l'un est "Parent" (composant parent) et l'autre est "Child" (composant enfant). Nous utiliserons des mixins pour implémenter la communication entre ces deux composants.

Tout d'abord, créons un objet mixins nommé "commonMixin" :

const commonMixin = {
  data() {
    return {
      message: "Hello from mixins!"
    };
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
};

Dans cet objet mixins, nous définissons un attribut de données et un attribut de méthode. L'attribut data contient une chaîne nommée « message » et l'attribut méthode contient une méthode nommée « showMessage ».

Ensuite, utilisons les mixins dans le composant parent :

Vue.component("Parent", {
  mixins: [commonMixin],
  template: `
    <div>
      <h1>Parent Component</h1>
      <button @click="showMessage">Show Message</button>
    </div>
  `
});

Dans ce composant parent, nous utilisons l'option mixins, en mélangeant commonMixin dans les options du composant. Ensuite, nous utilisons un bouton dans le modèle du composant, et lorsque le bouton est cliqué, la méthode showMessage sera appelée.

Enfin, utilisons également les mixins dans le sous-composant :

Vue.component("Child", {
  mixins: [commonMixin],
  template: `
    <div>
      <h1>Child Component</h1>
      <p>{{ message }}</p>
    </div>
  `
});

Dans ce sous-composant, nous utilisons également l'option mixins et mélangeons commonMixin dans les options du composant. Ensuite, nous utilisons une expression d'interpolation dans le modèle du composant pour afficher le message défini dans le composant parent.

Maintenant, nous pouvons utiliser ces deux composants dans une instance Vue pour tester :

new Vue({
  el: "#app"
});

<div id="app">
  <parent></parent>
  <child></child>
</div>

Dans cette instance de test, nous utilisons simplement les composants "Parent" et "Child" sous un élément