Was sind die Vorteile von Vue-Komponenten?

Vorteile von Vue-Komponenten: 1. Komponenten sind unabhängige und wiederverwendbare Code-Organisationseinheiten. Es ermöglicht Entwicklern, große Anwendungen mit kleinen, unabhängigen und normalerweise wiederverwendbaren Komponenten zu erstellen. Die basierte Entwicklung kann die Effizienz, Testbarkeit, Wiederverwendbarkeit usw. der Anwendungsentwicklung erheblich verbessern. 3. Sie ermöglicht dem Web-Front-End-Code eine „hohe Kohäsion“ und „geringe Kopplung“ und verwandelt den Front-End-Entwicklungsprozess in einen Erstellungsprozess Blöcke.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Vues Single-Page-Entwicklung ist eigentlich sehr einfach und abstrakt. Single-Page bezieht sich auf das einzige Vue-Beispiel, das new Vue({}) in main.js ist.

Wie kann man den Effekt so vieler Seiten erzielen? Dies beruht auf der Komponentenentwicklung. Wenn sich die URL ändert, werden verschiedene Komponentengruppen aktualisiert und gerendert.

Vue-Komponentisierung

Was ist Komponentisierung? Wenn wir auf komplexe Probleme stoßen, ist es schwierig, alle Probleme auf einmal zu lösen. Daher müssen wir zu diesem Zeitpunkt das Problem zerlegen und die kleinen Probleme lösen Alles in allem können wir die Lösung für dieses Problem finden. Es kommt uns bekannt vor! Tatsächlich ist dies die Idee der dynamischen Programmierung, aber es ist der Unterschied zwischen der optimalen Lösung und der Lösung. Komponentisierung ist auch die Idee, Probleme zu lösen. Wenn die Funktionslogik in einem Projekt besonders komplex ist, ist es für uns schwierig, alle logischen Interaktionen auf einmal abzuschließen, da es leicht zu Redundanz oder Rückrufhölle kommt Ein bestimmter Teil geht schief, es ist schwierig, ihn weiterzuverfolgen. Welche Codezeile verursacht das Problem? Gleichzeitig ist die Energie einer Person begrenzt. Um den persönlichen Druck zu verringern, werden Probleme in kleine Funktionsmodule unterteilt, was nicht nur den Aufwand für die Verwaltung und Wartung der Schnittstelle reduzieren kann, sondern auch für die Teamarbeit geeignet ist.

Aber tatsächlich sind für die Front-End-Entwicklung von Vue nicht viele Leute erforderlich, da es leichtgewichtig ist, sodass Künstler in tatsächlichen Projekten nur den entworfenen Prototyp an einen oder zwei Front-End-Entwickler senden müssen. Warum so wenige Es werden Entwickler benötigt, vor allem weil die komponentenbasierte Entwicklung von Vue die Geschäftslogik klarer macht.

vue-Komponentisierungsidee

Die Komponentisierungsidee ermöglicht es uns, unabhängige und wiederverwendbare kleine Komponenten zu entwickeln, um unsere Anwendungen zu erstellen.

• Jede Anwendung (Funktion) kann in einen Komponentenbaum abstrahiert werden.

Teilen Sie die Seite so weit wie möglich in kleine und wiederverwendbare Komponenten auf. Dadurch ist unser Code einfacher zu organisieren und zu verwalten und skalierbarer.

Die Vorteile der Vue-Komponentisierung

1. Komponenten sind unabhängige und wiederverwendbare Code-Organisationseinheiten. Das Komponentensystem ist eine der Kernfunktionen von Vue. Es ermöglicht Entwicklern, große Anwendungen mit kleinen, unabhängigen und normalerweise wiederverwendbaren Komponenten zu erstellen 2. Die Komponentenentwicklung kann die Effizienz, Testbarkeit, Wiederverwendbarkeit usw. erheblich verbessern 3. Es ermöglicht dem Web-Front-End-Code, „hohe Kohäsion und geringe Kopplung“ zu erreichen, wodurch der Front-End-Entwicklungsprozess in einen Bausteinprozess umgewandelt wird.

Verwendung von Komponenten

Prinzip

• Die Verwendung von Komponenten ist in drei Schritte unterteilt:
  • Komponentenkonstruktor erstellen
  • Komponente registrieren
  • Komponente verwenden
• Komponentenkonstruktor erstellen:
  • Const mycomponent = Vue.extend({template : ``}) aufrufen Konstruktor erstellen.
  • Schreiben Sie den entsprechenden HTML-Code in die Anführungszeichen nach der Vorlage. Tatsächlich handelt es sich bei dieser Vorlage um die Vorlage in der .vue-Datei (wenn Sie sich nicht sicher sind, können Sie zur Vue-Datei gehen, um sie zu erstellen).
  • Die einfachen Anführungszeichen nach : sind eigentlich ES6-Syntax. Wie wir alle wissen, sind Sonderzeichen erforderlich, um Zeichenfolgen und andere Inhalte in doppelte Anführungszeichen zu setzen. Der Inhalt zwischen einfachen Anführungszeichen und dem darin enthaltenen Code ändert jedoch nichts am Code. Format, zum Beispiel:
    
• Komponente registrieren:
  • Vue.component('Ihr eigener Komponentenname',mycomponent) aufrufen, der erste Parameter ist der von Ihnen erstellte Komponentenname und der zweite Parameter ist der Name der Komponente, die Sie beim Erstellen des Komponentenkonstruktors erstellt haben.
    
• Verwendung von Komponenten:
  • Verwendet in der Vorlage oben
    

Verwendung in der tatsächlichen Entwicklung – Eltern-Kind-Komponenten

• Die Verwendung von Komponenten in der tatsächlichen Entwicklung ist jeweils sehr einfach Komponente Sie sind alle eine .vue-Datei, die durch direktes Einführen und Deklarieren der Komponenten verwendet werden kann.

• Schritt 1: Erstellen Sie eine .vue-Datei. Hier erstelle ich eine Home.vue-Datei im Ordner „Views“.

• Schritt 2: Fügen Sie die Home-Datei in die Komponente ein, die verwendet werden muss. Hier ist mein Beispiel Home.vue wird in App.vue eingeführt. Bitte führen Sie es während der tatsächlichen Entwicklung selbst ein.
  
  

• Schritt 3: Registrieren Sie die Komponente in App.vue. Die darin enthaltenen Komponenten sind die untergeordneten Komponenten der Vue-Datei Vater Du kannst mehrere Söhne haben! ! !
  

• Schritt 4: Verwenden Sie diese Komponente, dh zeigen Sie den Inhalt von Home.vue in App.vue an
  

Übergeordnete/untergeordnete Komponenten geben Daten weiter.

• Übergeben Sie Daten über Requisiten an untergeordnete Komponenten.
• Senden Sie Nachrichten über Ereignisse an übergeordnete Komponenten.
  

Verwendung von Eltern-zu-Kind-Requisiten

• Verwenden Sie in untergeordneten Komponenten Requisiten, um die Daten zu deklarieren, die von der übergeordneten Komponente empfangen werden müssen.
• Props befinden sich auf derselben Ebene wie Daten, Methoden und Berechnungen, und die von der übergeordneten Komponente gesendeten Daten werden darin gespeichert.
• Requisiten sind in zwei Typen unterteilt:
  • Der erste Typ: Objekt. Das Objekt kann beim Übergeben den Typ festlegen und auch den Standardwert usw. festlegen.
  • Zweiter Typ: String-Array-Form. Jeder String im Array ist der Name der übergebenen Daten.
• Die erste Situation:
  
  
  
  • Durch vorheriges Studium sollten Sie in der Lage sein, die Aussage des ersten Bildes in der Vorlage in der .vue-Datei zu verstehen Diese Unterkomponente sollte patientlist sein, und die an die Unterkomponente übergebenen Informationen sind tatsächlich :weizhen="notfin", die im zweiten Bild zu finden sind, notfin Es ist ein Array , also was ist Weizhen? ? Schauen Sie sich das dritte Bild an, ich habe ein Objekt in Requisiten definiert! Der Name dieses Objekts ist weizhen, patientlist，而向子组件传递的信息其实就是:weizhen="notfin"，在第二张图片中可以发现，notfin是个数组，那么weizhen是什么？？看第三张图片，我在props里定义了一个对象！这个对象的名字就是weizhen，所以这个weizhen就是父组件把向子组件传递的数据封装了一个名字！
  • 这样就实现了父组件向子组件传递数据的第二种方式，怎么动态监控父组件传来的数据是否有变化并进行刷新后期会讲！
• 第二种情况：
  • 用上面的前两张图，其实变化的就是接收的方式：
    
  • 这样也能获取到相应的数据，但其实我喜欢用第一种，因为规定了类型和默认值后能让代码更容易读懂。

子传父-this.$emit()自定义事件

• 子传父使用this.$emit(‘自己起的名称’,data)
• 这个方法有两个参数，第一个是自己起的名字，例如上面的weizhenDieses weizhen ist also der Name, in dem die übergeordnete Komponente die an die untergeordnete Komponente übergebenen Daten kapselt!

Dies realisiert die zweite Möglichkeit für die übergeordnete Komponente, Daten an die untergeordnete Komponente zu übertragen. Wie man dynamisch überwacht, ob sich die Daten von der übergeordneten Komponente geändert haben, und diese aktualisiert, wird später erläutert!

Zweiter Fall:

Anhand der ersten beiden Bilder oben ändert sich tatsächlich die Art des Empfangs:
• 
  Auf diese Weise können Sie auch die entsprechenden Daten erhalten, aber tatsächlich verwende ich gerne die erste, da nach der Angabe des Typs und des Standardwerts Machen Sie den Code leichter lesbar.

• 
  

  Vom Sohn zum Vater – this.$emit() benutzerdefiniertes Ereignis

• Um vom Sohn zum Vater zu gelangen, verwenden Sie dieses.$emit('your own name', data)🎜🎜Diese Methode hat zwei Parameter: Der erste Parameter ist der von Ihnen gewählte Name, z. B. weizhen oben; der zweite Parameter sind die Daten, die Sie über die Funktion in der Unterkomponente verarbeiten möchten seien Die in data definierten Daten. Auf diese Weise kann die übergeordnete Komponente die von der untergeordneten Komponente zurückgegebenen Ergebnisse erhalten. 🎜🎜🎜🎜Die übergeordnete Komponente ruft direkt die Daten der untergeordneten Komponente ab🎜🎜🎜🎜this.$children🎜🎜🎜🎜🎜In den Methoden im Skriptmodul in der übergeordneten Komponente, wenn Sie die Daten der direkt abrufen möchten Untergeordnete Komponente, Sie können diese $children verwenden. 🎜🎜🎜🎜Wie unten gezeigt, verwenden wir $children, um die Nachrichtenzeichenfolge in der untergeordneten Komponente abzurufen. 🎜🎜🎜🎜🎜🎜Nachteile davon.$Kinder: 🎜
  • Beim Zugriff auf Unterkomponenten über $children handelt es sich um einen Array-Typ, und auf die Unterkomponenten muss über den Indexwert zugegriffen werden.
  • Wenn es zu viele Unterkomponenten gibt und wir eine davon benötigen, können wir ihren Indexwert oft nicht bestimmen und er kann sich sogar ändern.

this.$ref

• ref ist die Abkürzung für Referenz.
• $ref und ref werden häufig zusammen verwendet. Schritte zur Verwendung:
  • Binden Sie eine bestimmte ID über ref an eine Unterkomponente.
  • Auf die Komponente kann über diese.$refs.ID zugegriffen werden.
    
    

Die untergeordnete Komponente erhält direkt die Daten der übergeordneten Komponente - this.$parent

• Obwohl es auf diese Weise möglich ist, den Wert der übergeordneten Komponente direkt zu erhalten, ist dies nicht der Fall Es wird empfohlen, diese Methode in der tatsächlichen Projektentwicklung zu verwenden. Lassen Sie uns im Folgenden erklären, warum:
  • Erstens benötigen Unterkomponenten nicht viele Daten. Wenn zu viele Daten angewendet werden Der Kopplungsgrad wird erhöht.
  • Zweitens verwenden wir bei der Wiederverwendung von Komponenten in verschiedenen Projekten nur diese Unterkomponente entsprechend unseren Anforderungen. Wenn wir diese.$parent-Methode zum Abrufen von Daten verwenden, wird ein Fehler gemeldet, wenn im übergeordneten Element kein entsprechendes Feld vorhanden ist Komponente!
  • Wenn die Unterkomponente die Daten in der übergeordneten Komponente frei finden kann, ist die Pflege für uns sehr schwierig. Wenn ein bestimmtes Feld später nicht benötigt wird, muss auch die Unterkomponente entsprechend geändert werden Gleichzeitig erhöhen sich die Wartungskosten und der Arbeitsaufwand. Es ist auch Zeitverschwendung.
• Zusammenfassend: Es wird wirklich nicht empfohlen, $parent zu verwenden, aber Sie müssen es verstehen.

Datenübertragung zwischen nicht übergeordneten und untergeordneten Komponenten

• Vue1.x:
  • Verwenden Sie $dispatch, um Ereignisse nach oben zu versenden.
  • Verwenden Sie $broadcast, um Ereignisse nach unten zu übertragen.
• Vue2.x:
  • Kündigen Sie zunächst die beiden Methoden in Vue1.x.
  • Diese Version nutzt einen zentralen Eventbus, der über einen Vermittler abgewickelt wird.
  • Die Bedeutung dieses Vermittlers besteht darin, dass die beiden Tabellen in der Eins-zu-Viele-Beziehung in der Datenbank eine relationale Tabelle benötigen, um strukturelle Verwirrung zu vermeiden.
• Nach einer Reihe von Entwicklungen und Optimierungen ist Vuex entstanden. Die Vuex-Verwaltungslösung ist derzeit eine Kernfunktion von Vue. Ich werde in den folgenden Artikeln gesondert darauf eingehen.

Zusammenfassung

Komponenten sind eine der wichtigsten Funktionen in Vue. Wenn es wiederverwendbare Komponenten gibt, müssen Sie sie verwenden Sie erstellen jedes Mal einen neuen. Der entsprechende Code ist zu langweilig!

【Empfohlene verwandte Video-Tutorials:

Vuejs-Einführungs-Tutorial, Erste Schritte mit dem Web-Frontend】

Das obige ist der detaillierte Inhalt vonWas sind die Vorteile von Vue-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!