Liaison de données bidirectionnelle des composants parent-enfant dans une application pratique de Vue

Préface : Dans le travail réel, il existe de nombreux scénarios dans lesquels les données sont traitées dans les composants enfants et les modifications des données doivent être obtenues de manière synchrone dans les composants parents. Par exemple, une page de requête comporte de nombreuses conditions de requête. Supposons qu'il existe un sous-composant qui sélectionne les composants pour les régions. Nous devons effectuer l'opération de requête immédiatement après avoir sélectionné la région. À ce stade, nous devons synchroniser les données entre le parent et les composants enfants.

1. Définition et introduction des sous-composants

Il existe deux manières de définir des sous-composants : l'enregistrement global et l'enregistrement local. Cependant, dans mon travail actuel, j'utilise essentiellement l'enregistrement local pour définir le sous-composant en tant que fichier. Le composant parent introduit le sous-composant et enregistre le sous-composant .vuedansimport : componentscomposant
parent

import AreasSelector from '@/components/AreasSelector/index';
... 
components: {
    
    
    AreasSelector
},

Lorsque vous utilisez un sous-composant dans un composant parent, vous devez définir les paramètres que le sous-composant peut accepter et les paramètres qu'il doit renvoyer, en fonction des scénarios métier respectifs.
Ici, mon composant enfant peut recevoir deux paramètres transmis par le composant parent : l'un est la areaIdsrégion qui a été sélectionnée dans le composant parentids ; l'autre est isMultisi la région prend en charge plusieurs sélections. Vous devez l'utiliser lorsque vous transmettez des données d'un composant parent à un composant enfant.Si propsvous transmettez des données statiques (chaînes, nombres, etc.), vous n'avez pas besoin de les ajouter.Si :vous souhaitez transmettre des données dynamiques (données qui doit être obtenu à partir de l'instance actuelle du composant), vous devez l'ajouter :.
Les paramètres à renvoyer par le sous-composant sont ceux sélectionnés après que l'utilisateur a cliqué sur le comportement areaIds. $onPour recevoir les paramètres renvoyés par le sous-composant, vous devez définir une fonction de rappel où le sous-composant est utilisé, qui équivaut à un observateur :
dans le composant parent

<AreasSelector :props="{areaIds,isMulti:true}" @area-change="onAreaChange"></AreasSelector>

Lorsque les données doivent être envoyées dans un sous-composant, utilisez $emitSend Data, qui équivaut à un éditeur :
dans le sous-composant

this.$emit('area-change', newVal);

$onEt $emitle mode observateur est utilisé, c'est-à-dire $emitqu'il faut trouver toutes les $onfonctions de rappel définies, puis exécuter toutes les fonctions de rappel. Vous pouvez simplement jeter un oeil au vuecode source. Je n'ai gardé que les parties les plus critiques :

Vue.prototype.$emit = function (event) {
    
    
  var vm = this;
  // cbs中存储着$on定义的回调函数列表
  var cbs = vm._events[event];
  if (cbs) {
    
    
    cbs = cbs.length > 1 ? toArray(cbs) : cbs;
    var args = toArray(arguments, 1);
    var info = "event handler for \"" + event + "\"";
    for (var i = 0, l = cbs.length; i < l; i++) {
    
    
    	// 到这个函数中执行回调函数
      invokeWithErrorHandling(cbs[i], vm, args, vm, info);
    }
  }
  return vm
};

Deuxièmement, regardez

À l'intérieur du composant enfant, lorsque l'utilisateur clique sur une région, une série de traitements est requise, et le traitement est converti en un idtableau de régions et transmis au composant parent. Nous pouvons appeler manuellement le processus de transmission au composant parent $emit, ou nous pouvons le laisser watchsurveiller les modifications des données et watchl'appeler en interne $emit.
Le document officiel de surveillance
watch est vueun objet d'attribut qui peut être défini par le composant. dataIl est utilisé pour surveiller vueles modifications des données dans le composant. Il existe trois formes de définition keydes données qui doivent être surveillées : ① Le nom de la méthode de la fonction de rappel , une chaîne ② Objet, où L'attribut est une méthode de fonction de rappel. Lorsque l'attribut est , cela signifie que la fonction de rappel sera également déclenchée lorsque les attributs profonds de l'objet cible surveillé changent ; lorsque l'attribut est défini sur , il le fera Être appelé immédiatement après le début de l'écoute ③ Tableau de fonctions de rappel, ils seront exécutés dans l'ordre Nous pouvons en définir un pour les données qui doivent être transmises au composant parent , surveiller ses changements en temps réel et appeler automatiquement :value

handlerdeeptrueimmediatetrue

watcher$emit

watch: {
    
    
    'areaData': {
    
    
        handler(newVal, oldVal) {
    
    
            if (!newVal) return;
            this.$emit('area-change', newVal);
        },
        deep: true,
        immediate: true
    }
},