Concernant l'implémentation du mécanisme de répartition entre les composants parents et enfants de Vue2.0 (tutoriel détaillé)

Cet article présente principalement le mécanisme de répartition des événements entre les composants parents et enfants de Vue2.0. Maintenant, je le partage avec vous et le donne comme référence.

Tous ceux qui viennent de vue1.x savent que dans vue2.0, $dispatch et $broadcase pour la communication d'événements entre les composants parents et enfants ont été supprimés. La considération officielle est que la méthode de flux d'événements basée sur la structure arborescente des composants est vraiment difficile à comprendre et deviendra de plus en plus fragile à mesure que la structure des composants se développe. Surtout lorsque la hiérarchie des composants est relativement profonde. À travers le mécanisme de diffusion et de distribution des événements, cela semble plus déroutant.

Tout en l'abolissant, le responsable nous a également fourni des solutions de remplacement, notamment l'instanciation d'une instance de vue vide et l'utilisation de $emit pour réagir aux changements d'état sur les sous-composants

1. pour déclencher l'événement

helloWorld.vue en tant que composant parent, et la variable dialogConfigVisible contrôle l'affichage ou le masquage de la boîte de dialogue du sous-composant.

configBox.vue est utilisé comme sous-composant, en supposant qu'il s'agit d'une fenêtre contextuelle d'annonce encapsulée.

Dans helloWorld.vue dans le composant parent,

< template/>

  <config-box
   :visible="dialogConfigVisible"        
   @listenToConfig="changeConfigVisible"
 > </config-box>

script

 data(){
  return {
   dialogConfigVisible:true
  }
 }
  methods: {
   changeConfigVisible(flag) {
     this.dialogConfigVisible = flag;
   }
  }

Puis, dans le composant enfant Dans configBox.vue, $emit est principalement utilisé dans tout rappel d'événement pour déclencher l'événement ListenToConfig personnalisé, et les paramètres peuvent être ajoutés ultérieurement et transmis au composant parent. Par exemple, lorsque vous cliquez sur × dans la fenêtre contextuelle du composant enfant pour la fermer, le composant parent helloWorld.vue est informé que je souhaite le fermer. Il s'agit principalement de permettre au composant parent de modifier les variables d'état correspondantes et de transmettre false. à l'événement personnalisé.

script

methods:{
 dialogClose() {
  this.show = false;
  this.$emit("listenToConfig", false)
 }
}

Dans le composant enfant, déclenchez activement l'événement ListenToConfig et transmettez le paramètre false, indiquant au composant parent que la boîte de dialogue helloWorld.vue est sur le point de se fermer. Ici, vous pouvez éviter que l'état du composant parent ne change pas et la boîte de dialogue apparaîtra automatiquement lorsque la page sera à nouveau actualisée.

2. Instancier un bus d'instance de vue vide

Une instance de vue vide de bus est instanciée ici, principalement pour gérer uniformément la communication entre les composants enfants et les composants parents, via le bus en tant que support, créez d'abord un fichier bus.js, créez-y un objet, le composant parent est table.vue, le composant enfant est tableColumn.vue

 // bus.js
 import Vue from "vue";
 export var bus = new Vue({
   data:{
    scrollY:false
   },
   methods:{
    updateScrollY(flag){
     this.scrollY = flag;
    }
   }
  })

puis introduisez-les respectivement :

 // table.vue
 <script>
 import {bus} from "./bus"
  export default {
   created(){
    bus.$on(&#39;getData&#39;,(argsData)=>{
     // 这里获取子组件传来的参数
     console.log(argsData);
     })

   }
  }

 </script>

 // tableColumn.vue
 <script>
  import {bus} from "./bus"
  export default{
   methods(){
    handleClick(){
     bus.$emit(&#39;getData&#39;,{data:"from tableColumn!"})
    }
   }
  }
 </script>

Dans le composant parent-enfant ci-dessus, le composant parent utilise le bus pour enregistrer et écouter l'événement getData. Une fois qu'il y a un changement d'état dans le composant enfant, l'événement correspondant sur le bus est. déclenché.

Cette méthode d'utilisation d'instances vides équivaut à la création d'un centre d'événements, ce type de communication convient donc également à la communication entre composants non parent-enfant,

3. Communication entre composants parent-enfant de niveau supérieur

Parfois, les deux composants qui peuvent vouloir communiquer ne sont pas des composants parent-enfant directs, mais des composants grand-père et petit-fils, ou parent-enfant qui s'étendent sur plus de niveaux

Il est impossible de faire remonter des paramètres niveau par niveau à partir des sous-composants pour atteindre l'objectif de communication, bien que la communication que nous comprenons maintenant soit relayée de cette manière. Vous pouvez continuer à parcourir les boucles while jusqu'à ce que vous trouviez le composant parent cible, puis déclencher l'événement sur le composant correspondant.

Ce qui suit est un mixins pour la communication des composants parent-enfant implémenté par element-ui, qui joue un grand rôle dans la synchronisation des composants. Cette communication entre composants est également spécifiquement mentionnée dans l'aperçu des avantages d'element-ui

function broadcast(componentName, eventName, params) {

 // 向下遍历每个子节点，触发相应的向下广播的 事件
 this.$children.forEach(child => {
  var name = child.$options.componentName;

  if (name === componentName) {
   child.$emit.apply(child, [eventName].concat(params));
  } else {
   broadcast.apply(child, [componentName, eventName].concat([params]));
  }
 });
}
export default {
 methods: {
   // 向上遍历父节点，来获取指定父节点，通过$emit 在相应的 组件中触发 eventName 事件
  dispatch(componentName, eventName, params) {
   var parent = this.$parent || this.$root;
   var name = parent.$options.componentName;
   // 上面的componentName 需要在每个vue 实例中额外配置自定义属性 componentName,
   //可以简单替换成var name = parent.$options._componentTag;

   while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
     name = parent.$options.componentName;
    }
   }
   if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
   }
  },
  broadcast(componentName, eventName, params) {
   broadcast.call(this, componentName, eventName, params);
  }
 }
};

Définissez d'abord deux composants imbriqués f1.vue et c1.vue L'exemple est :

 <f1>
  <c1></c1>
 </f1>

<. 🎜>Ensuite, définissez respectivement deux composants parent et enfant :

c2.vue

 <template>
   <section>
   <button type="button" name="button" @click="dispatchTest">点击一下，就可以</button>
  </section>
 </template>
<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "c2",
mixins: [Emitter],
componentName:&#39;c2&#39;,
methods: {
 dispatchTest() {
  this.dispatch(&#39;f1&#39;, &#39;listenerToC1&#39;, false);
 }
}
}
</script>

f1.vue

<template type="html">
 <p class="outBox-class">
  <slot>
  </slot>
 </p>
</template>

<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "f1",
mixins: [Emitter],
componentName: &#39;f1&#39;,
mounted() {
 this.$on("listenerToC1", (value) => {
   alert(value);
 })
}
}
</script>

De cette façon, vous pouvez cliquer dedans le composant enfant Le bouton déclenche l'événement ListenerToC1. Cet événement est écouté dans le composant parent

et est en fait plus similaire à l'événement déclencheur $emit. La différence est qu'il peut être imbriqué à plusieurs niveaux et que des composants parent-enfant directs ne peuvent pas nécessairement être déclenchés.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment formater l'heure actuelle via js ?

Utiliser vue pour introduire le CSS, problèmes moins connexes

Comment introduire des fichiers CSS publics via vue

Quelles sont les méthodes d'utilisation d'ajax dans Vue ?

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!