Partage d'exemples de communication de composants Vue.js

Parce que je suis très intéressé par Vue.js et que la pile technologique sur laquelle je travaille habituellement est également Vue.js, j'ai passé du temps à étudier le code source de Vue.js au cours des derniers mois, et j'en ai fait un résumé et un résultat. . Les composants sont l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML, encapsulant du code réutilisable. Cet article partagera avec vous plusieurs postures pour la communication des composants Vue.js. Les amis intéressés devraient y jeter un œil.

Écrit devant

Il peut y avoir des écarts de compréhension. Vous êtes invités à soulever un problème et à le signaler pour apprendre et progresser ensemble.

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

Le composant parent communique avec les composants enfants

Méthode 1 : accessoires

Utilisez des accessoires, le composant parent peut utiliser des accessoires pour passer à les données du composant enfant.

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

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

Modèle de vue du composant enfant child.vue

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

Méthode 2 utiliser $children

utiliser $children peut accéder aux composants enfants du 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 le événement via $emit et rappelle les composants parents.

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

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
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('msgFunc');
    }
  }
}
</script>

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

Cette méthode ne peut être utilisée que lorsque le composant parent transmet une variable de référence ne peut 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 entre composants parent-enfant à plusieurs niveaux :

Dans Vue1.0, deux méthodes, $broadcast et $dispatch, sont implémentées pour diffuser (ou distribuer) aux composants enfants ( ou composants parents) ), lorsque le composant enfant (ou composant parent) écoute l'événement et renvoie vrai, l'événement continuera à être diffusé (ou distribué) 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.

Recommandations associées :

Méthode de communication des composants frères et sœurs Vue

Explication détaillée de la communication des composants non parent-enfant du bus d'événements dans Vue

Plongée approfondie dans les composants Vue.js et la communication entre les composants

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!