Teil 4: Komponenten in Vue.js

Vue.js unter der Lupe: Komponenten
Keine Kommentare

Vue.js im Detail vorgestellt: Wie definiert man Komponenten in Vue? Dieses Tutorial stellt die verschiedenen Wege vor.

Komponenten

Komponenten sind einzelne, unabhängige Einheiten eines Interfaces, die einen eigenen Zustand, Markup, und Stil haben können. Vue-Komponenten können hauptsächlich auf vier Wegen definiert werden. Das sehen wir uns direkt im Code an.

Das ist der erste Weg:

new Vue({
/* options */
})
</pre
Und der Zweite:
Vue.component('component-name', {
/* options */
})

Der dritte Weg läuft über lokale Komponenten: Komponenten, die nur durch eine bestimmte Komponente zugänglich und nicht woanders verfügbar sind (was großartig für Datenkapselung ist).

Die vierte Option befindet sich in den .vue-Dateien, die auch als Single File Components bezeichnet werden.

Betrachten wir die ersten drei Wege im Detail.

Standardmäßig wird new Vue() oder Vue.component() dann verwendet, wenn man eine Applikation erstellen will, die keine Single Page Application ist, sondern nur auf einigen der Seiten mit Vue.js läuft, z. B. einem Kontaktformular oder einem Einkaufswagen. Vielleicht wird Vue aber auch für alle Seiten benutzt, aber der Server rendert das Layout und Sie liefern das HTML an den Client, der dann Ihre erstellte Vue-Applikation lädt. In einer SPA, in der Vue das HTML erstellt, ist es eher üblich, dass eine Single File Component verwendet wird, weil das praktischer ist.

Sie instanzieren Vue, indem Sie es auf ein DOM-Element mounten. Wenn Sie einen <div id="app"></div>-Tag haben, dann werden Sie folgendes benutzen:

new Vue({ el: '#app' })

Eine Komponente, die mit new Vue initialisiert wurde, hat keinen korrespondierenden Name-Tag und ist darum normalerweise die Haupt-Container-Komponente.

Andere Komponenten, die in der Applikation verwendet werden, werden durch Vue.component() initialisiert. Eine solche Komponenten erlaubt es Ihnen, einen Tag zu definieren, mit dem Sie eine Komponente mehrmals in eine Applikation einbetten können und den Output der Komponente in einer template-Eigenschaft spezifizieren:

<div id="app">
<user-name name="Flavio"></user-name>
</div>
Vue.component('user-name', {
props: ['name'],
template: '<p>Hi {{ name }}</p>'
})
new Vue({
el: '#app'
})

Was machen wir hier? Wir initialisieren eine Vue-Root-Komponente auf #app und benutzen darin die Vue-Komponente user-name, die unsere Begrüßung an den Benutzer abstrahiert.

Die Komponente akzeptiert ein Prop, das ein Attribut ist, das wir benutzen, wenn wir Daten an eine Child-Komponente übergeben.

Auch interessant: Wie man die erste App mit Vue.js baut

In dem Vue.component()-Aufruf haben wir den user-name als den ersten Paramter übergeben. Das gibt der Komponente einen Namen. Der Name lässt sich hier auf zwei Weisen schreiben. Die erste Möglichkeit, die wir benutzt haben, heißt kebab-case. Die zweite Möglichkeit heißt PascalCase, die wie der camelCase ist, allerdings wird der erste Buchstabe groß geschrieben.

Vue.component('UserName', {
/* ... */
})

Vue erstellt intern automatisch einen Alias zu user-name, der UserName lautet und vice versa. Sie können also nehmen, was Ihnen besser gefällt. Im Allgemeinen ist es aber am besten, dass man UserName im JavaScript verwendet und user-name im Template.

Lokale Komponenten

Jede Komponente, die mit Vue.component() erstellt wurde, ist global registriert. Sie müssen die Komponente keiner Variable zuweisen oder übergeben, um sie in ihrem Template wiederzuverwenden. Sie können Komponenten lokal einkapseln, indem Sie ein Objekt zuweisen, das die Objektkomponente zu einer Variablen definiert:

const Sidebar = {
template: '<aside>Sidebar</aside>'
}

Und dann können Sie es innerhalb einer anderen Komponente verfügbar machen, indem Sie die components-Eigenschaften verwenden:

new Vue({
el: '#app',
components: {
Sidebar
}
})

Sie können die Komponente in dieselbe Datei schreiben, aber hier ist der Einsatz von JavaScript-Modulen eine großartige Option.

import Sidebar from './Sidebar'
export default {
el: '#app',
components: {
Sidebar
}
}

Eine Komponente wiederverwenden

Eine Child-Komponente kann mehrfach hinzugefügt werden. Jede separierte Instanz ist von den anderen unabhängig.

<div id="app">
<user-name name="Flavio"></user-name>
<user-name name="Roger"></user-name>
<user-name name="Syd"></user-name>
</div>
 Vue.component('user-name', {
props: ['name'],
template: '<p>Hi {{ name }}</p>'
})
new Vue({
el: '#app'
})

Die Grundbausteine einer Komponente

Bisher haben wir uns angeschaut, wie eine Komponente die Eigenschaften el, props und Template akzeptiert.

  • el wird nur in Root-Komponenten verwendet und durch new Vue({}) initialisiert und identifiziert das DOM-Element, auf das die Komponenten gemountet wird.
  • props listet alle Eigenschaften auf, die wir an eine Child-Komponente übergeben können.
  • In template können wir die Template-Komponente einrichten, die für die Definition des Outputs zuständig ist, der von der Komponente generiert wird.

Eine Komponente akzeptiert aber auch andere Eigenschaften:

  • data, der lokale Zustand der Komponente
  • methods, die Methoden der Komponente
  • computed, die berechneten Eigenschaften, die mit der Komponente assoziiert sind
  • watch, die Watcher der Komponente

Im nächsten Teil schauen wir uns dann an, wie wir eine Single File Component erstellen.


Dieser Artikel erschien zuerst auf Englisch im Vue Handbook von Flavio Copes.


Kostenlos: Das iJS React Cheat Sheet

Sie wollen mit React durchstarten?
Unser Cheatsheet zeigt Ihnen alle wichtigen Snippets auf einen Blick.
Jetzt kostenlos herunterladen!

Download for free

 

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -