Analyse détaillée de plusieurs postures dans la communication des composants Vue.js

Que sont les composants Vue ?

Le composant est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également prendre la forme d'éléments HTML natifs, étendus avec l'attribut is.

Communication entre les composants Vue

Composant parent communiquant avec le composant enfant

Méthode 1 : accessoires

À l'aide d'accessoires, le composant parent peut utiliser des accessoires pour transmettre des données au composant enfant.

Modèle de vue de composant parent père.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  data () {
    return {
      message: &#39;father message&#39;;
    }
  }
}
</script>

Modèle de vue de composant enfant enfant.vue

<template>
  <p>{{msg}}</p>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

Méthode 2 : utilisez $children

Utilisez $children pour accéder aux composants enfants dans le composant parent.

Le composant enfant communique avec le composant parent

Méthode 1 : Utiliser les événements vue

Le composant parent transmet la méthode événementielle au composant enfant, et le composant enfant déclenche l'événement via $emit et rappelle le composant parent.

Modèle de vue de composant parent père.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

Modèle de vue de composant enfant enfant.vue

<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit(&#39;msgFunc&#39;);
    }
  }
}
</script>

Méthode 2 : Modifier les données du composant parent en modifiant les accessoires passés par le composant parent

Cette méthode ne peut transmettre qu'une référence au composant parent Il peut être utilisé lors de l'utilisation de variables, mais les variables littérales ne peuvent pas obtenir l'effet correspondant. Parce que la variable potable pointe finalement vers la même adresse mémoire, qu'il s'agisse des données du composant parent ou des données des accessoires obtenues par le composant enfant, donc modifier les données des accessoires du composant enfant modifie les données du composant parent. composant.

Cependant, il n'est pas recommandé de faire cela. Il n'est pas recommandé de modifier directement la valeur des accessoires si les données sont utilisées pour afficher les modifications, dans le développement réel, je les mets souvent dans les données et les renvoie. si nécessaire. Le composant parent utilise ensuite des événements pour renvoyer des données. Cela maintient les composants indépendants et découplés et ne provoque pas de confusion anormale du flux de données en raison de l'utilisation des mêmes données. Les données sont uniquement transmises via des interfaces spécifiques pour modifier les données, et l'état des données internes est géré par des données spécialisées.

Méthode 3 : Utilisez $parent

Utilisez $parent pour accéder aux données du composant parent.

Transfert de données entre composants non parent-enfant et composants frères

Pour la communication de composants non parent-enfant, Vue recommande officiellement d'utiliser une instance Vue comme bus d'événements central.

Vue dispose d'un mécanisme d'événement interne, vous pouvez vous référer au code source.

La méthode $on est utilisée pour écouter un événement.

$emit est utilisé pour déclencher un événement.

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
  //......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');

Communication des composants parent-enfant à plusieurs niveaux :

Dans Vue1.0, deux méthodes, $broadcast et $dispatch, sont implémentées pour communiquer avec les composants enfants (ou le composant parent) diffuse (ou distribue). Lorsque le composant enfant (ou le composant parent) écoute l'événement et renvoie vrai, il continue de diffuser (ou de distribuer) l'événement au composant de niveau petit-enfant. . Mais cette méthode a été supprimée dans Vue2.0.

Lorsque j'étudiais l'élément de bibliothèque de composants open source d'Ele.me, j'ai découvert qu'ils réimplémentaient les méthodes de diffusion et de répartition et les introduisaient sous forme de mixin. Pour plus de détails, veuillez vous référer à « Talk ». à propos de la diffusion et de la répartition de la bibliothèque de composants d'éléments". Mais c'est légèrement différent des deux implémentations de méthodes de Vue1.0. Ces deux méthodes implémentent les fonctions de diffusion d'événements vers les composants descendants et de répartition d'événements vers les composants parents multi-niveaux. Mais il ne s'agit pas d'un événement diffusé au sens large. Il doit spécifier un nom de commentaire pour diffuser (distribuer) les événements au composant portant le nom de composant spécifié.

En fait, l'implémentation interne de ces deux méthodes utilise toujours $parent et $children, qui sont utilisés pour parcourir les nœuds enfants ou interroger les nœuds parents étape par étape. Lors de l'accès au nom du composant spécifié, $emit est. appelé pour déclencher l'événement Specify.

Gestion complexe des données d'application sur une seule page

Lorsque l'application est suffisamment complexe, veuillez utiliser vuex pour la gestion des données.

Résumé

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!