Heim >Web-Frontend >js-Tutorial >Ein Anfängerleitfaden zur Arbeit mit Komponenten in Vue
Ein Anfängerleitfaden zur Arbeit mit Komponenten in Vue
- Jennifer AnistonOriginal
- 2025-02-14 09:35:11860Durchsuche
vue.js 'Komponentenarchitektur macht das Erstellen einer Benutzeroberfläche effizient und bequem. Sie können Ihre Anwendung in kleinere, wiederverwendbare Komponenten unterteilen und dann komplexere Strukturen mit diesen Komponenten erstellen.
Dieser Leitfaden bietet Ihnen eine erweiterte Einführung in VUE -Komponenten. Wir werden untersuchen, wie Komponenten erstellt werden, wie Sie Daten zwischen Komponenten (über Requisiten und Ereignisbusse) übergeben und wie zusätzliche Inhalte innerhalb von Komponenten mithilfe von Vues <slot></slot> Element rendern. Jedes Beispiel wird mit einer runnablen Codepen -Demo geliefert.
Schlüsselpunkte
-
Die komponentierte Architektur von
- Vue hilft dabei, die Benutzeroberfläche in wiederverwendbare, leicht zu verwaltende Ausschnitte aufzubauen und so die Wiederverwendbarkeit und Organisation des Codes zu verbessern.
- Komponenten können weltweit mit
Vue.componentoder lokal in Einzelfilmkomponenten erstellt werden. - Die Daten können unter Verwendung von Requisiten an Unterkomponenten übergeben werden und bieten eine klare und strukturierte Möglichkeit, Daten im Komponentenbaum zu verwalten und zu übergeben.
- Mit dem Ereignisbus kann die Kommunikation von untergeordneten Komponenten zu übergeordneten Komponenten effektiv verwaltet werden, sodass untergeordnete Komponenten Daten an die Komponentenhierarchie zurücksenden können. Das
- Vues
<slot></slot>Element hilft, den Inhalt innerhalb der Komponente zu nisten, wodurch es flexibler und in der Lage ist, Inhalte aus der übergeordneten Komponente zu empfangen, die mit Fallback -Inhalten überschrieben werden können.
So erstellen Sie Komponenten in VUE
Komponenten sind im Wesentlichen wiederverwendbare VUE -Instanzen mit Namen. Es gibt viele Möglichkeiten, Komponenten in einer Vue -Anwendung zu erstellen. Beispielsweise können Sie in kleinen bis mittelgroßen Projekten globale Komponenten anhand der Vue.component -Methode wie folgt registrieren:
<code class="language-javascript">Vue.component('my-counter', {
data() {
return {
count: 0
}
},
template: `<div>{{ count }}</div>`
})
new Vue({ el: '#app' })</code>
Der Name der -Komponente ist my-counter. Es kann so verwendet werden:
<code class="language-html"><div> <my-counter></my-counter> </div></code>Wenn Sie eine Komponente benennen, können Sie sich für die Verwendung von Kebab-Case (
) oder Pascal-Case (my-custom-component) entscheiden. Bei der Referenzierung von Komponenten in Vorlagen kann jede Variante verwendet werden. Bei der direkten Referenzierung von Komponenten direkt im DOM (wie im obigen Beispiel gezeigt) ist nur der Namen MyCustomComponent kebab-case-Tag gültig.
Sie können auch feststellen, dass
data Es gibt verschiedene Möglichkeiten, Komponentenvorlagen zu definieren. Oben haben wir Vorlagenliterale verwendet, aber wir können auch Marker mit
text/x-template
In komplexeren Projekten können globale Komponenten schnell schwer zu verwalten sein. In diesem Fall ist es sinnvoll, Ihre Anwendung für die Verwendung einer einzelnen Dateikomponente zu entwerfen. Wie der Name schon sagt, sind dies einzelne Dateien mit enthalten
Übertragen Sie Daten über Props auf Komponenten übertragen
Wir können diese in untergeordnete Komponenten unterbrechen, damit jede Komponente spezifische Daten verarbeitet, sodass der Komponentenbaum so aussieht:
Da alle Daten aus der übergeordneten Komponente übergeben werden, könnte dies so aussehen: . Daher sieht unsere HTML -Vorlage wie folgt aus: der Props -Name, den wir Daten aus der übergeordneten Komponente erhalten. Die Daten, die wir empfangen möchten, heißt -Komponente deklarieren: Wir können auch die Überprüfung aktivieren, wenn sie Props übergeben, um sicherzustellen, dass die richtigen Daten übergeben werden. Dies ähnelt den ProTtypen in React. Ändern Sie unsere Komponente so, um die Überprüfung im Beispiel zu aktivieren, um so zu sehen: Wenn wir den falschen Prop -Typ übergeben, sehen Sie einen Fehler in der Konsole ähnlich dem, was ich unten gezeigt habe:
Es gibt einen offiziellen Leitfaden in der Vue -Dokumentation, mit der Sie die Prop -Überprüfung verstehen können.
.vue Erweiterungen, die <template></template>, <code class="language-javascript">Vue.component('my-counter', {
data() {
return {
count: 0
}
},
template: `<div>{{ count }}</div>`
})
new Vue({ el: '#app' })</code>
Vue.component() In diesem Handbuch werde ich die Methode <code class="language-html"><div>
<my-counter></my-counter>
</div></code>
<code class="language-vue"><template>
<div>{{ count }}</div>
</template>
</code>
author-detail
<code class="language-html"><blogpost>
<authordetails></authordetails>
<postdetails></postdetails>
<comments></comments>
</blogpost></code>
In der obigen Beispielkomponente definieren wir die Autorendetails und veröffentlichen Informationen. Als nächstes müssen wir die Kinderkomponenten erstellen. Nennen wir die untergeordnete Komponente owner
owner
author Wir übergeben das Autorobjekt an die untergeordnete Komponente als Requisiten mit dem Namen author-detail, die wir in der übergeordneten Komponente definieren. <code class="language-javascript">new Vue({
el: '#app',
data() {
return {
author: {
name: 'John Doe',
email: 'jdoe@example.com'
}
}
}
})</code> Um auf diese Daten zuzugreifen, müssen wir Requisiten in der <code class="language-html"><div>
<author-detail :owner="author"></author-detail>
</div></code>
<code class="language-javascript">Vue.component('author-detail', {
template: `
<div>
<h2>{{ owner.name }}</h2>
<p>{{ owner.email }}</p>
</div>
`,
props: ['owner']
})</code>