Dieses Mal werde ich Ihnen die grundlegenden Methoden zur Verwendung von Vue-Komponenten und die Vorsichtsmaßnahmen bei der Verwendung von Vue-Komponenten erläutern. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Was ist eine Komponente?
Eine Komponente ist eine einfache Kapselung von Daten und Methoden. Die Komponente im Web kann tatsächlich als Komponente der Seite betrachtet werden. Sie ist eine Schnittstelle mit unabhängiger Logik und Funktion. Gleichzeitig kann sie gemäß den angegebenen Schnittstellenregeln miteinander integriert werden und wird schließlich zu einer vollständigen Die Seite besteht aus solchen Komponenten wie Navigation, Liste, Popup-Fenster, Dropdown-Menü usw. Die Seite ist nur ein Container für solche Komponenten. Die Komponenten werden frei kombiniert, um eine voll funktionsfähige Schnittstelle zu bilden. Wenn eine Komponente nicht benötigt wird oder Sie eine Komponente ersetzen möchten, können Sie sie jederzeit ersetzen, ohne den Betrieb zu beeinträchtigen die gesamte Anwendung. , Die Kernidee der Front-End-Komponentisierung besteht darin, eine große und komplexe Sache mit angemessener Granularität in kleine Dinge aufzuteilen.
Zur Verbesserung der Entwicklungseffizienz, zur Erleichterung der Wiederverwendung, zur Vereinfachung von Debugging-Schritten, zur Verbesserung der Wartbarkeit des gesamten Projekts und zur Erleichterung der kollaborativen Entwicklung.
Als leichtgewichtiges Front-End-Framework liegt der Kern von vue in der Komponentenentwicklung.
Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. In einigen Fällen können Komponenten auch als native HTML-Elemente erscheinen, die um das Attribut is erweitert wurden.
In Vue sind Komponenten wiederverwendbare Vue-Instanzen. Da es sich bei Komponenten um wiederverwendbare Vue-Instanzen handelt, erhalten sie dieselben Optionen wie neue Vue-Instanzen, z. B. Daten, Berechnung, Überwachung, Methoden und Lebenszyklus-Hooks. Die einzigen Ausnahmen sind Root-Instanz-spezifische Optionen wie el.
Diese Komponenten sind weltweit registriert. Das heißt, sie können nach der Registrierung in der Vorlage jeder neu erstellten Vue-Root-Instanz (neues Vue) verwendet werden. Zum Beispiel:
Das Gleiche gilt für alle Unterkomponenten, was bedeutet, dass diese drei Komponenten sich auch intern gegenseitig nutzen können.
Lokale Registrierung
Eine globale Registrierung ist oft nicht ideal. Wenn Sie beispielsweise ein Build-System wie Webpack verwenden, bedeutet die globale Registrierung aller Komponenten, dass eine Komponente auch dann in Ihrem endgültigen Build-Ergebnis enthalten ist, wenn Sie sie nicht mehr verwenden. Dies führt zu einem unnötigen Anstieg der Menge an JavaScript, die von Benutzern heruntergeladen wird.
Für jedes Attribut im Komponentenobjekt ist sein Attributname der Name des benutzerdefinierten Elements und sein Attributwert ist das Optionsobjekt dieser Komponente. Beachten Sie, dass lokal registrierte Komponenten in ihren untergeordneten Komponenten nicht verfügbar sind. Wenn Sie beispielsweise möchten, dass KomponenteA in KomponenteB verfügbar ist, müssen Sie Folgendes schreiben:
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
Nach dem Login kopieren
Verwenden Sie registrierte Komponenten in Babel und Webpack
Beachten Sie, dass in ES2015+ Das Einfügen eines Variablennamens wie ComponentA in das Objekt ist eigentlich ComponentA: die Abkürzung von ComponentA, das heißt, dieser Variablenname ist auch:
Der Name des in der Vorlage verwendeten benutzerdefinierten Elements Enthält die Option von dieser Komponenten-Variablenname
Die auf diese Weise definierten Variablen in Daten sind globale Variablen. Bei der Verwendung von Komponenten wirkt sich die Änderung des Werts der Variablen in einer Komponente auf den Wert in allen Komponenten aus . Der Wert der Variablen. Um Variableninterferenzen zu vermeiden, muss die Datenoption einer Komponente eine Funktion sein, damit jede Instanz eine unabhängige Kopie des zurückgegebenen Objekts verwalten kann:
data: function () {
return {
count: 0
}
}
Nach dem Login kopieren
Dynamische Komponenten
Das ist es Sehr nützlich, um dynamisch zwischen verschiedenen Komponenten zu wechseln, beispielsweise in einer Benutzeroberfläche mit mehreren Registerkarten:
Der oben genannte Inhalt kann über das -Element von Vue übergeben werden Attribut, um dies zu erreichen:
Web-Frontend
