Detaillierte Einführung in die geteilten Komponenten von vue.j

Dieses Mal zeige ich Ihnen, wie Sie Gruppen Komponenten in Vue.js aufteilen und welche Vorsichtsmaßnahmen für die Aufteilung von Komponenten in Vue.js gelten Ein praktischer Koffer, schauen wir uns das gemeinsam an. Schauen Sie mal rein.

Für einige gemeinsame Seiten können alle zusammensitzen und Code eingeben. Nachdem diese Seite fertiggestellt ist, können jedoch auch andere Seiten als System mit komplexen Funktionen erstellt werden, insbesondere für die Verwendung einiger geeigneter ModularisierungEntwickeltes Framework, das erscheint sehr ineffizient, daher schauen wir uns einfach an, wie Komponenten in Vue aufgeteilt werden.

Zusammenfassend gibt es zwei Möglichkeiten, sie zu unterteilen: die Funktionsblöcke auf der Seite, die Auswahl, die Seitenaufteilung und einige Teile, für deren Implementierung viel Code erforderlich ist. Wir können sie extrahieren und zusammenfügen oder klassifizieren. Es gibt auch eine Möglichkeit, es nach Seitenbereich, Kopfzeile, Fußzeile und Seitenleiste zu unterteilen. Wie werden Vue-Komponenten implementiert, nachdem Komponenten vorhanden sind?

Wie werden Vue-Komponenten implementiert? Schauen wir uns zunächst an, wie es im Dateisystem

aussieht APP.vue ist ein Eingang zum Projekt, und die von uns geteilten Komponenten sind auch Objekte. In APP.vue verwenden wir Import, um jede Komponente zu importieren. Import, Header bezieht sich auf die Datei header.vue auf der rechten Seite. Diese Schreibmethode ist eine Schreibmethode von es6. Wenn Sie die Komponentisierung von es6 nicht benötigen, müssen Sie natürlich auch eine andere erforderliche verwenden s, um einen Verpackungsprozess zu schreiben und durchzuführen, wenn Sie diese beiden Komponenten einfach in app.vue einführen Im Inneren sind diese beiden Komponenten noch nicht auf der Seite verfügbar.

In Vue muss diese Komponente über Komponenten registriert und importiert werden Fügen Sie es ein und schreiben Sie dann

auf der Vorlagenebene. Nach dem Rendern wird die Vorlagenebene zum Inhalt von header.vue und footer.vue. Beachten Sie, dass Vue registriert werden muss, bevor Sie es verwenden können

Um die Kommunikation zwischen Vue-Komponenten einzuführen und sich an ein Konzept zu halten, müssen Sie zuerst den Code in der Datei header.vue registrieren, vorausgesetzt, wir haben Daten darin, ist ein Benutzername, und dann ist die Methode dothis, wie wir sehen Es gibt ein Attribut props und eine Nachricht, die registriert wird. Wenn unsere app.vue die Header-Komponente aufruft, können wir direkt eine Nachricht in das Header-Attribut schreiben und alle Daten in app.vue an header.vue übergeben Wenn die Nachricht hier nicht in header.vue geschrieben ist, können die Attribute nicht abgerufen werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erläuterung der Vue Family Bucket-Projektpraxis

So implementieren Sie Ajax mit nativen asynchronen JS-Anfragen

So verwenden Sie die Vuex-Statusverwaltung

vue2.0 wählt alle aus und kehrt die Auswahl in der Tabelle um

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die geteilten Komponenten von vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!