Vue-Tutorial zur erweiterten Verwendung dynamischer Komponenten

Ich glaube, dass dynamische Komponenten im Entwicklungsprozess die meiste Zeit verwendet werden. Wenn wir Zustände zwischen verschiedenen Komponenten wechseln müssen, können dynamische Komponenten unsere Anforderungen sehr gut erfüllen. Der Kern davon ist die Verwendung des Komponenten-Tags und des is-Attributs.

Grundlegende Beschreibung

// vue
<div id="app">
  <button @click="changeTabs('child1')">Kind1</button>
  <button @click="changeTabs('child2')">Kind2</button>
  <button @click="changeTabs('child3')">child3</button>
  <Komponente: ist = "Tabs auswählen">
  </Komponente>
</div>

// js
var Kind1 = {
  Vorlage: '<div>Inhalt1</div>',
}
var Kind2 = {
  Vorlage: '<div>Inhalt2</div>'
}
var Kind3 = {
  Vorlage: '<div>Inhalt3</div>'
}
var vm = neuer Vue({
  el: '#app',
  Komponenten:
    Kind1,
    Kind2,
    Kind3
  },
  Methoden: {
    changeTabs(tab) {
      dies.chooseTabs = Registerkarte;
    }
  }
})

AST-Analyse

Die Interpretation von <component> stimmt mit den vorherigen Artikeln überein. Sie beginnt mit der AST-Analysephase. Der Prozess konzentriert sich nicht auf jedes Detail, sondern erklärt speziell die Unterschiede zu vorherigen Verarbeitungsmethoden. Die Unterschiede bei der dynamischen Komponentenanalyse konzentrieren sich auf processComponent. Aufgrund der Existenz des is-Attributs im Tag wird das Komponentenattribut im endgültigen AST-Baum markiert.

// Analyse dynamischer Komponenten Funktion processComponent (el) {
  var-Bindung;
  // Den dem is-Attribut entsprechenden Wert abrufen if ((binding = getBindingAttr(el, 'is'))) {
    // Der AST-Baum hat ein zusätzliches Komponentenattribut el.component = binding;
  }
  if (getAndRemoveAttr(el, 'inline-template') != null) {
    el.inlineTemplate = true;
  }
}

Renderfunktion

Mit dem AST-Baum besteht der nächste Schritt darin, eine ausführbare Renderfunktion basierend auf dem AST-Baum zu generieren. Aufgrund des Komponentenattributs wird der Generierungsprozess der Renderfunktion über den Zweig genComponent durchgeführt.

//Renderfunktionsgenerierungsfunktion var code = generate(ast, options);

// Implementierung der Generate-Funktion function generate (ast,options) {
  var state = neuer CodegenState(Optionen);
  var Code = ast? genElement(ast, Status) : '_c("div")';
  zurückkehren {
    rendern: ("mit(diesem){return " + code + "}"),
    staticRenderFns: Zustand.staticRenderFns
  }
}

Funktion genElement(el, status) {
  ···
  Variablencode;
  // Dynamischer Komponentenzweig if (el.component) {
    Code = genComponent(el.component, el, Status);
  }
}

Die Verarbeitungslogik für dynamische Komponenten ist eigentlich sehr einfach. Wenn kein Inline-Vorlagenflag vorhanden ist (was später erläutert wird), werden die nachfolgenden untergeordneten Knoten zum Spleißen abgerufen. Der einzige Unterschied zu gewöhnlichen Komponenten besteht darin, dass der erste Parameter von _c keine angegebene Zeichenfolge mehr ist, sondern eine Variable, die die Komponente darstellt.

// Verarbeitungsfunktion für dynamische Komponenten genComponent (
    Komponentenname,
    el,
    Zustand
  ) {
    // Wenn das Attribut inlineTemplate gesetzt ist, ist children null
    var Kinder = el.inlineTemplate? null: genChildren(el, Status, true);
    
    return ("_c(" + Komponentenname + "," + (genData$2(el, Status)) + 
    (Kinder ? ("," + Kinder) : '') + ")")
  }

Vergleich zwischen normalen Komponenten und dynamischen Komponenten

Renderfunktion gewöhnlicher Komponenten

"mit(diesem){return _c('div',{attrs:{"id":"app"}},[_c('child1',[_v(_s(test))])],1)}"

Dynamische Komponenten-Renderfunktion

"mit(diesem){return _c('div',{attrs:{"id":"app"}},[_c(chooseTabs,{tag:"component"})],1)}"

Kurz zusammengefasst besteht der Unterschied zwischen dynamischen und normalen Komponenten darin:

1. Das Komponentenattribut wird in der AST-Phase hinzugefügt, was ein Zeichen für dynamische Komponenten ist
2. Während der Generierungsphase der Renderfunktion wird aufgrund der Existenz des Komponentenattributs der Zweig genComponent ausgeführt. genComponent führt eine spezielle Verarbeitung der Ausführungsfunktion dynamischer Komponenten durch. Im Gegensatz zu gewöhnlichen Komponenten ist der erste Parameter von _c keine unveränderliche Zeichenfolge mehr, sondern eine angegebene Komponentennamenvariable.
3. Der Prozess vom Rendern bis zum Vnode ist der gleiche wie bei normalen Komponenten, außer dass die Zeichenfolge durch eine Variable ersetzt wird und das Datenattribut { tag: ‚Komponente‘ } aufweist. In diesem Beispiel nimmt chooseTabs child1.

Dynamische Komponenten in Factory-Funktionsform

Sie können dynamische Komponenten auch in Form von Factory-Funktionen wie folgt verwenden:

const AsyncComponent = () => ({

  // Zu ladende Komponente (sollte ein „Promise“-Objekt sein)

  Komponente: import('./MyComponent.vue'),

  //Komponentenladen, das beim asynchronen Laden von Komponenten verwendet wird: LoadingComponent,

  // Beim Laden der verwendeten Komponente schlägt der Fehler fehl: ErrorComponent,

  // Zeigt die Verzögerungszeit der Komponente während des Ladens an. Der Standardwert ist 200 (Millisekunden)

  Verzögerung: 200,

  // Wenn ein Timeout angegeben ist und die Komponentenladung abläuft,

  //Verwende die Komponente, die verwendet wird, wenn das Laden fehlschlägt. Der Standardwert ist: „Unendlich“.

  Zeitüberschreitung: 3000

});



Komponenten:

  Asynchrone Komponente,

},

Zusammenfassen

Dies ist das Ende dieses Artikels über die erweiterte Verwendung dynamischer Vue-Komponenten. Weitere relevante Inhalte zu dynamischen Vue-Komponenten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!