Was ist eine Vue-Komponente?

In Vue ist eine Komponente eine wiederverwendbare Vue-Instanz. Sie hat einen eindeutigen Komponentennamen. Sie kann HTML-Elemente erweitern und den Komponentennamen als benutzerdefiniertes HTML-Tag verwenden. Komponenten können die Wiederverwendung von Code erheblich verbessern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Was sind Komponenten?

Komponente ist ein wichtiges Konzept in Vue. Es handelt sich um eine wiederverwendbare Vue-Instanz. Sie kann HTML-Elemente erweitern und den Komponentennamen als benutzerdefiniertes HTML-Tag verwenden. Da es sich bei Komponenten um wiederverwendbare Vue-Instanzen handelt, erhalten sie dieselben Optionen wie new Vue(), z. B. Daten, Berechnung, Überwachung, Methoden und Lebenszyklus-Hooks. Die einzigen Ausnahmen sind Root-Instanz-spezifische Optionen wie el.

Extrahieren Sie einige gängige Module, schreiben Sie sie in separate Toolkomponenten oder Seiten und führen Sie sie dann direkt in die erforderlichen Seiten ein. Dann können wir es als Komponente zur Wiederverwendung extrahieren.

Zum Beispiel können der Seitenkopf, die Seite, der Inhaltsbereich, das Ende, hochgeladene Bilder usw. in Komponenten umgewandelt werden, wenn mehrere Seiten dieselben verwenden, was die Code-Wiederverwendungsrate verbessert.

Verwendung von Vue-Komponenten

Lass uns zuerst über unser Verzeichnis sprechen

1. Erstellen Sie unsere Komponente B.vue

Ähnlich, Neu Ein hallo_wort .vue als übergeordnetes Element

Dann sehen Sie ein Ergebnis wie dieses

Wichtige Punkte:

Führen Sie das B.vue-Modul in hello_word.vue ein // importiere showB aus './B .vue' Komponente einführen

Benutzerdefinierter Modulname der B-Datei anzeigenB

Komponente registrieren

rrree

Hinweis: Definieren Sie den Komponentennamen in Kamel-Schreibweise, z. B ：Verwenden Sie PascalCase. Verwenden Sie Kebab-Case.

Beginnen Sie mit den Hauptthemen-Requisiten Um zu funktionieren, übergibt die untergeordnete Komponente props Get) Die props-Option der untergeordneten Komponente kann Daten von der übergeordneten Komponente empfangen. Richtig, Requisiten sind nur in eine Richtung gebunden, das heißt, sie können nur von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden, nicht umgekehrt.

Die Verwendung ist wie folgt:

B-Komponente

Übergeordnete Komponente

Dann sehen Sie die Seitenanzeige

Drucken Sie den erstellten Wert aus

Ergebnis,

Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente

In der untergeordneten Komponente:

 components:{
          showB,        
        },
<showB /> //使用组件

Übergeordnete Komponente:

Führen Sie @msg='msg' im DOM ein

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit(&#39;msg&#39;, &#39;知道了知道了&#39;) //执行 msg 函数并把要改变的值作为参数带过去
        }

Empfangen Sie es über die Methode

Ausführen, klicken, um auf die übergeordnete Komponente zu antworten

Ergebnis drucken:

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt vonWas ist eine Vue-Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!