Wie Vue.js Komponenten aufteilt

Was ich Ihnen dieses Mal zeige, ist, wie Sie Dateien in Vue.js gruppieren . Dieser Artikel gibt Ihnen eine gute Analyse.

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, es zu unterteilen: Die eine besteht aus den Funktionsblöcken auf der Seite: Auswählen, Seitenaufteilung und einige Teile, für deren Implementierung viel Code erforderlich ist gruppieren 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?

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 es verwendet werden kann. Um die Kommunikation zwischen Vue-Komponenten einzuführen, müssen Sie zunächst den Code in der Datei header.vue registrieren Wir haben Die Daten sind Benutzername und die Methode ist dothis. Wir sehen, dass es ein

-Attribut

props gibt und eine Nachricht registriert ist, wenn unsere app.vue die Header-Komponente aufruft Das Header-Attribut schreibt eine Nachricht und übergibt alle Daten in app.vue an header.vue. Alles wird durch den Vue-Mechanismus implementiert. Wenn msg hier nicht in header.vue geschrieben wird, können die Attribute nicht abgerufen werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Über HTTP/2-Server-Push

Wie NVM verschiedene Versionen von Knoten verwaltet

So ermitteln Sie, ob die CheckBox-Auswahl leer ist

Das obige ist der detaillierte Inhalt vonWie Vue.js Komponenten aufteilt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!