Introduction aux méthodes de communication des composants Vue (avec code)

Le contenu de cet article est une introduction à la méthode de communication des composants vue (avec code). Il a une certaine valeur de référence. J'espère qu'il sera utile. vous. aider.

La composantisation de vue devrait être son idée principale. Qu'il s'agisse d'une grande page ou d'un petit bouton, cela peut être appelé un composant. Le développement basé sur Vue signifie écrire des composants un par un, qu'il s'agisse de composants de base ou de composants métier, et ils doivent tous être assemblés à la fin. Selon la relation hiérarchique des composants, les relations entre les composants peuvent être résumées comme suit : relation parent-enfant, relation générationnelle, relation fraternelle et aucune relation connexe.

$ref, $parent, $children

En fonction du contexte actuel, vous pouvez accéder à l'instance du composant via $ref, $parent, $children, et vous pouvez appeler directement la méthode du composant ou accéder aux données. Parmi eux, $parent peut accéder au composant parent du composant actuel, et $children peut accéder à tous les composants enfants du composant actuel. Bien que $parent et $children puissent obtenir des instances de composants, ils ne peuvent pas communiquer entre niveaux ou entre frères et sœurs, ce qui constitue leur inconvénient.

provide et inject

provide / inject sont de nouvelles API ajoutées par Vue après la version 2.2.0.

Cette paire d'options doit être utilisée ensemble pour permettre à un composant ancêtre d'injecter une dépendance dans tous ses descendants, quelle que soit la profondeur de la hiérarchie des composants, et prendra toujours effet à partir du moment où l'amont et l'aval des relations s'établissent.

C'est-à-dire, fournissez une valeur dans le composant parent et injectez la valeur modifiée dans le composant descendant qui doit être utilisé, c'est-à-dire :

// Parent.vue
export default {
    provide() {
        return {
            name: 'Stone'
        }
    }
}
// Child.vue
export default {
   inject: ['name'],
   mounted() {
       console.log(this.name)
   }
}

Pas seulement Child.vue, car tant qu'il s'agit de Parent. Les sous-composants de vue peuvent être injectés via cette méthode, quel que soit le nombre de générations d'intervalle. Cette méthode de transmission transparente de composants à plusieurs niveaux peut garantir la clarté du flux de données unidirectionnel. Par exemple, les informations globales telles que les informations utilisateur peuvent être complétées à l'aide de ces deux API sans introduire la bibliothèque tierce vuex.

L'alternative à Vuex

vuex est de gérer les données de manière centralisée et de les obtenir partout où cela est nécessaire. Selon cette idée, nous pouvons injecter des informations globales dans le composant racine App.vue et les ajouter à. la page Utiliser n'importe où.

// App.vue
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
export default {
    provide() {
        return {
            userInfo: this.user
        }
    },
    data() {
        return {
            user: {}
        }
    },
    methods: {
      getUserInfo () {
        $.ajax('/user/info', (data) => {
          this.user = data
        })
      }
    }
}

Fournissez l'intégralité de l'instance App.vue this au monde extérieur, afin que d'autres pages puissent obtenir des informations sur les utilisateurs via this.userInfo.

<template>
  <div>
    {{ userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['userInfo']
  }
</script>

$dispatch et $broadcast

Ces deux API sont des versions de Vue 1.0. $dispatch est utilisé pour distribuer des événements aux niveaux supérieurs, et $broadcast est utilisé pour diffuser des événements aux niveaux inférieurs. .Ils Il est obsolète dans la version 2.0.

Parce que la méthode de flux d'événements basée sur la structure arborescente des composants est parfois difficile à comprendre, et deviendra de plus en plus fragile à mesure que la structure des composants se développe.

Cependant, nous pouvons mettre en œuvre nous-mêmes les méthodes de répartition et de diffusion pour la communication inter-niveaux des composants. La clé de leur mise en œuvre est de savoir comment trouver correctement le composant à communiquer, c'est-à-dire en faisant correspondre l'option de nom du composant pour trouver le composant vers le bas ou vers le haut.

Les deux méthodes doivent transmettre 3 paramètres. Le premier paramètre est la valeur de l'option de nom du composant de communication, le second est le nom de l'événement personnalisé et le troisième est la valeur à transmettre au composant de communication. Lors de la répartition, le composant parent est recherché vers le haut dans la boucle while jusqu'à ce que le nom du composant corresponde à l'option de nom d'un composant parent. À ce stade, le composant parent est le composant avec lequel communiquer. La méthode de diffusion est similaire à la répartition, recherchant vers le bas les sous-composants via la boucle forEach. Enfin, encapsulez un mixins pour faciliter la réutilisation.

// emitter.js 
function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

Mélanger les composants en composants via des mixins pour établir la communication entre les composants.

<!-- Parent.vue -->
<template>
  <button @click="handleClick">
    触发事件
    <Child></Child>
  </button>
</template>
<script>
import Emitter from "../assets/js/emitter.js";
import Child from "./Child.vue";
export default {
  name: "Parent",
  mixins: [Emitter],
  created() {
    this.$on("on-message", message => {
      console.log(message);
    });
  },
  components: {
    Child
  },
  methods: {
    handleClick() {
      this.broadcast("Child", "on-message", "Hello, I am Parent Component");
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div></div>
</template>
<script>
import Emitter from "../assets/js/emitter.js";
export default {
  name: "Child",
  mixins: [Emitter],
  mounted() {
    this.$on("on-message", message => {
      console.log(message);
      this.dispatch("Parent", "on-message", "Copy that, I am Child Component");
    });
  }
};
</script>

Par rapport aux deux API intégrées dans la version Vue 1.0, la méthode d'auto-implémentation présente les différences suivantes :

• Vous devez transmettre le nom du composant comme premier paramètre ;
• cessera de boucler et ne bouillonnera pas lorsqu'il correspond au composant ;
• ne peut transmettre qu'un seul paramètre. Si plusieurs paramètres doivent être transmis, il ne peut pas être transmis. être transmis uniquement via un formulaire d'objet ou de tableau ;

Autres méthodes

Il existe d'autres méthodes pour la communication des composants dans vue, telles que :

1. props, $emit

<!-- Parent.vue -->
<template>
  <Child :info="info"
         @update="onUpdateName"></Child>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      info: {
        name: "stone"
      }
    };
  },
  components: {
    Child
  },
  methods: {
    onUpdateName(name) {
      this.info.name = name;
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <div>{{info.name}}</div>
    <button @click="handleUpdate">update</button>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  methods: {
    handleUpdate() {
      this.$emit("update", "new-name");
    }
  }
};
</script>

Le composant parent transmet ses propres méthodes au composant enfant, et le composant enfant appelle la méthode pour transmettre les données au composant parent à l'aide de l'événement bus event bus $attrs, $listenersVue 2.4 nouvelle API.

$attrs contient des liaisons d'attributs (sauf classe et style) dans la portée parent qui ne sont pas reconnues (et obtenues) comme accessoires.

$listeners contient des écouteurs d'événements v-on dans la portée parent (sans modificateur .native). Gestion centralisée de l'état de Vuex

Écrit à la fin

Différentes méthodes de communication conviennent à différents scénarios. La communication peut être réalisée via l'API intégrée de Vue ou via une méthode d'événements personnalisés, lorsque l'application est. assez complexe, vous pouvez utiliser Vuex pour la gestion des données.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez prêter attention à la colonne Vidéo du didacticiel JavaScript du site Web PHP chinois !

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!