Einführung in die Vue-Komponenten

Einleitung

Bei der Entwicklung einer großen Anwendung ist es immer eine gute Idee, sie in kleinere Komponenten zu zerlegen, um den Code leichter lesbar, strukturierbar und wartungsfreundlich zu machen. Die meisten Vue-Anfänger verstehen, was Komponenten zumindest konzeptionell sind, aber sie verstehen möglicherweise nicht, was sie können und was nicht.

In diesem Leitfaden werfen wir einen Blick darauf, was eine Komponente in Vue ist, wie sie funktioniert, wie Daten und Ereignisse durch sie geleitet werden und vieles mehr.

Was ist eine Vue-Komponente?

Komponenten sind wiederverwendbare Instanzen von Vue-Elementen, die Vorlagen, Stile und JavaScript-Elemente enthalten. Jede Komponente ist „ihr eigenes Ding“, ähnlich wie jedes HTML-Element „sein eigenes Ding“ ist, und sowohl Vue-Komponenten als auch HTML-Elemente ermöglichen es uns, sie als Bausteine ​​für Webseiten zu verwenden.

Sie können sich Vue-Komponenten als JavaScript-durchdrungene HTML-Elemente vorstellen, die Sie selbst definieren und manipulieren können.

Eine typische Vue-Anwendung besteht aus zahlreichen Komponenten, die beliebig oft wiederverwendet werden können.

Zum Beispiel hat eine normale Website Abschnitte, die auf allen Seiten erscheinen – Navigationsleiste, Kopfzeile, Fußzeile und so weiter. Daher wird es als bewährte Vorgehensweise angesehen, jede von ihnen zu einer separaten Komponente zu machen. Auf diese Weise erstellen wir gut strukturierten, lesbaren, wiederverwendbaren und leicht wartbaren Code:

So erstellen Sie eine Vue-Komponente

Es gibt zwei grundlegende Möglichkeiten, eine Vue-Komponente zu erstellen, je nachdem, wie unser Projekt erstellt wurde – mit oder ohne Build-Setup. Im ersten Fall wird jede Komponente in einer separaten Datei gespeichert. Im zweiten Fall können mehrere Komponenten in einer einzigen Datei vorhanden sein.

Erstellen Sie Vue-Komponenten mit einem Build-Setup

Die meisten Projekte werden mit dem erstellt Aufbau bauen, wodurch wir Single-File-Komponenten erstellen können (SFCs) – dedizierte Komponentendateien mit der .vue Verlängerung. Dadurch können wir die Vorlage, Logik und Gestaltung einer Vue-Komponente in einer einzigen Datei kapseln:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Erstellen Sie Vue-Komponenten ohne Build-Setup

Wenn Sie aus irgendeinem Grund keinen Paketmanager wie z npm Um Vue auf Ihrem Computer zu installieren, können Sie Vue weiterhin in Ihrer App verwenden. Eine Alternative zum Gebäude Vue mit npm ist die Installation von Vue über a Content Delivery Network (CDN) direkt in Ihrer App. Lassen Sie uns kurz diese Art der Erstellung einer Vue-Komponente durchgehen.

Durch die Installation von Vue ohne Build können wir Vue-spezifische Funktionen wie mit einfachem JavaScript verwenden. Die Syntax ist etwas ähnlich zu dem, was wir in den üblichen SFCs gesehen haben:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

In diesem Handbuch verwenden wir die SFC-Syntax, da dies die am häufigsten verwendete Methode zum Erstellen von Komponenten ist.

So registrieren Sie Komponenten in Vue

Bisher haben wir gesehen, wie man Komponenten in Vue erstellt. Der nächste Schritt besteht darin, diese Komponenten in einer anderen Komponente zu verwenden (Eltern-Kind-Hierarchie).

Dazu müssen wir zunächst Komponenten registrieren, die wir verwenden möchten. Diese Registrierung beinhaltet das Importieren und anschließende Registrieren von Komponenten. Dazu gibt es zwei Möglichkeiten – globale und lokale Registrierung.

Vue-Komponenten – Globale Registrierung

Global registrierte Komponenten sind, wie der Name schon sagt, global verfügbar, was bedeutet, dass sie in jeder Komponente unserer Anwendung verwendet werden können, ohne dass wir sie erneut importieren müssen. Dies wird erreicht, indem eine Komponente mithilfe von registriert wird app.component() Verfahren:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

In einer Situation, in der wir viele Komponenten haben, können wir das Kette sie so:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Nachdem wir unsere Komponenten registriert haben, können wir sie in der Vorlage jeder Komponente innerhalb dieser Anwendung mit der folgenden Syntax verwenden:

<ChildComponent/>
<ProfileComponent/>

Vue-Komponenten – Lokale Registrierung

Wir werden in den meisten Fällen eine lokale Registrierung verwenden, da wir damit die Verfügbarkeit unserer registrierten Komponenten einschränken können. Importieren Sie diese Komponenten und fügen Sie sie dann der components Option erreicht dies:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

Verwenden Sie beim Benennen von Komponenten CamelCase um deutlich zu machen, dass es sich um eine Vue-Komponente und nicht um ein natives HTML-Element in Vorlagen handelt. Dies erleichtert auch das Importieren und Registrieren von Komponenten in JavaScript.

So übergeben Sie Daten durch Vue-Komponenten

Einer der Vorteile beim Erstellen von Komponenten ist die Möglichkeit, Code wiederzuverwenden, indem man ihn modular macht.

Angenommen, wir erstellen eine Benutzerprofilkomponente, die die Daten jedes Schülers von der Profilseite erhalten muss; In diesem Fall müssen wir diese Daten von der Profilkomponente (übergeordnete Komponente) an die Benutzerprofilkomponente (untergeordnete Komponente) weitergeben, und wir verwenden Props.

Requisiten

Requisiten sind benutzerdefinierte Attribute, die wir für eine Komponente registrieren können, sodass wir Daten von der übergeordneten Komponente an die untergeordnete Komponente mithilfe von übergeben können props Option innerhalb des script-Tags:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

Spielautomaten

Vue-Slots sind reservierte Bereiche, die es uns ermöglichen, jede Art von Inhalt von einer Komponente zur anderen weiterzugeben. Dies ermöglicht eine zentralisiertere Kontrolle als Requisiten, da die übergeordnete Komponente im Gegensatz zu Requisiten den Inhalt innerhalb der untergeordneten Komponente steuert. Zum Beispiel könnten wir die folgende Schaltfläche erstellen:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Dann können wir diese Komponente überall verwenden und ihr den gewünschten Inhalt geben. Wenn Sie ihm keinen Inhalt geben, wird der Standardwert verwendet, den wir ihm gegeben haben (Klicken Sie auf mich):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

So geben Sie Ereignisse von Vue-Komponenten aus

Wir haben gelernt, dass Requisiten verwendet werden, um Daten von der übergeordneten Komponente an die untergeordnete Komponente zu senden. Aber wir fragen uns vielleicht, ob es eine Möglichkeit gibt, etwas von der untergeordneten Komponente an die übergeordnete Komponente zu senden. Und die Antwort ist ja, können auch Ereignisse von der untergeordneten Komponente an die übergeordnete Komponente gesendet werden.

Angenommen, wir haben eine übergeordnete Komponente (App.vue), die eine einzelne untergeordnete Komponente enthält (MyBlogPost.vue). Außerdem enthält die untergeordnete Komponente einen Button, der den Titel ändern soll.

Angenommen, wir wollen den Titel unserer Seite ändern, wenn auf einen Button geklickt wird, damit eine Funktion ausgelöst wird:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

Und die untergeordnete Komponente sieht folgendermaßen aus:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Zusammenfassung

In diesem Handbuch haben wir gelernt, wie man mit Komponenten in Vue arbeitet, was für jeden, der Vue verwendet, unerlässlich ist. Wir haben auch gelernt, wie man Daten sendet und empfängt und wie man Ereignisse ausgibt.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://stackabuse.com/introduction-to-vue-components/