Einstieg in Vue-Komponenten

  • 5 Minuten

Definitionsgemäß ist eine Komponente „ein Teil oder Element eines größeren Ganzen“. Wenn Sie eine Anwendung erstellen möchten, arbeiten Sie in der Regel mit kleineren Teilen und kombinieren sie zu einem größeren Ganzen: Ihrer Anwendung. Mit Vue können Sie Komponenten erstellen, die Sie anschließend zum Erstellen einer vollständigen Anwendung verwenden können.

Vue-Komponenten

Obwohl Sie Komponenten mithilfe von JavaScript-Dateien erstellen können, besteht die gängigste Methode darin, Einzeldatei-Komponenten mithilfe der Vue-Syntax in einer .vue-Datei zu erstellen. Einzeldatei-Komponenten ermöglichen eine klare Struktur und ein eigenständiges Setup. Sie können sogar verschiedene Präprozessoren verwenden, z. B. Pug oder Stylus.

Wenn Sie Komponenten erstellen, erstellen Sie im Grunde neue Tags, die Sie in Ihrer Anwendung ähnlich wie normale HTML-Tags verwenden können. Diese Form von semantischen Tags verdeutlicht, was auf einer Seite angezeigt wird. Ein Tag wie <booking-form></booking-form> wird wahrscheinlich ein Formular zum Erstellen einer Buchung anzeigen und <booking-list></booking-list> wahrscheinlich eine Liste der Buchungen anzeigen.

Vue-Komponenten-Struktur

Vue-Komponenten enthalten drei Hauptabschnitte: style, script und template.

Format

Der style-Abschnitt kann beliebige gültige CSS- oder Syntax-Elemente eines beliebigen Präprozessors enthalten, die Sie möglicherweise verwenden.

Sie können auch den Umfang Ihres CSS auf eine bestimmte Komponente festlegen, indem Sie das scoped-Attribut verwenden. Die Stile gelten dann nur für diese Komponente, sodass Sie Klassen und andere Einstellungen erstellen können, ohne sich Gedanken machen zu müssen, dass andere Teile der Seite versehentlich geändert werden.

<style>
.demo {
    font-family: Verdana
}
</style>

script

Der script-Abschnitt speichert das Skript, das für die Komponente verwendet wird. Wie bei einer Vue-JavaScript-Komponente können Sie die verschiedenen Vue-Eigenschaften und -Methoden exportieren, wie z. B. data(), methods und components.

<script>
export default {
    data() {
        return {
            product: {
                name: 'Cruise to the moon',
                description: 'A cool cruise to the moon!'
            }
        }
    }
}
</script>

Vorlage

Der template-Abschnitt enthält die HTML-Vorlage, die Sie verwenden, um Informationen anzuzeigen und dem Benutzer die Interaktion mit den Daten zu ermöglichen. Wenn Sie eine JavaScript-basierte Komponente verwenden, befindet sich template in der Regel in der HTML-Datei oder als Zeichenfolgenliteral in einer JavaScript-Datei.

Die in template verwendete HTML-Syntax ist mit JavaScript-basierten Komponenten identisch, einschließlich der Verwendung von Handlebars ({{}}) zum Anzeigen von Daten.

<template>
  <div id="product">
    <div>{{ product.name }}</div>
    <div>{{ product.description }}</div>
  </div>
</template>

Hinweis

Vorlagen müssen ein Root-Element enthalten. Das heißt, das div-Element mit product als id darf keine gleichgeordneten Elemente besitzen. Es dürfen lediglich untergeordnete Elemente vorhanden sein, wie im vorangehenden Code gezeigt.

Laden und Komponenten

Wie bereits erwähnt, werden Einzeldatei-Komponenten mit der Erweiterung .vue gespeichert. Sie können diese Komponenten auf ähnliche Weise wie andere Module laden, indem Sie die import-Anweisung verwenden. Sie können sie mithilfe der components-Eigenschaft registrieren. Nachdem die Komponenten registriert wurden, sind Sie für die Verwendung als Tag in template verfügbar.

Hinweis

Wenn Sie eine Bibliothek mithilfe von import importieren, wird standardmäßig PascalCase für den Namen verwendet, bei dem der erste Buchstabe für jedes Wort großgeschrieben wird (z. B. PascalCase). HTML verwendet als Konvention für Tag-Namen jedoch kebab-case, bei alle Wörter kleingeschrieben und durch Bindestriche (-) getrennt werden. Die beiden unterschiedlichen Konventionen werden von Vue automatisch verwaltet.

<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
    components: {
        ProductDisplay
    }
}

Im vorangehenden Code wird die Komponente ProductDisplay importiert und zur components-Eigenschaft hinzugefügt. Wenn ProductDisplay in der Vorlage verwendet wird, erkennt der Vue-Compiler, dass es sich bei dieser Komponente um ein zu analysierendes Element und nicht um ein reguläres HTML-Element handelt.

Separation of Concerns

Das Platzieren von HTML, CSS und JavaScript in einer Datei scheint eine Abkehr von der bewährten Vorgehensweise beim Erstellen separater Dateien für jeden Typ zu sein. In der Praxis kann das Wechseln zwischen diesen Dateien aufgrund von Abhängigkeiten zwischen diesen Dateien zu einer verlangsamten Entwicklung führen. Außerdem führt dies zu einer kognitiven Belastung, weil Sie zwischen Dateien wechseln müssen.

Mit Einzeldatei-Komponenten können Sie separate Dateien für die script- und style-Abschnitte mithilfe des src-Attributs erstellen.

<template>
    <div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>