Software-Entwicklung

Teil 4: Individualisiertes Rendering einer Vue.js Komponente

Vue.js ermöglicht es auf unterschiedlichste Arten Daten über Komponenten auszugeben. Je nachdem welchem Zweck eine Komponente dient, müssen Daten auf verschiedene Weisen über die Komponenten ausgegeben bzw. an die Komponenten übergeben werden.

Zahnrad_740x415

 

Ausgabe der Daten über den <slot> tag

Der <slot>-Tag ist ein Platzhalter in einem Komponenten-Template. Dieser ermöglicht es innerhalb eines Templates bestehende Inhalte, die innerhalb eines Komponenten Tags stehen, auszugeben.

Die finale Ausgabe im HTML ist wie folgt:

Der <p> Tag stammt von dem Komponenten-Template, der <span> Tag inkl. Text wird statt dem <slot> Tag gerendert. Wäre im <message> Tag kein Inhalt angegeben, dann wäre der Platzhaltertext, welcher zwischen dem <slot> Tags steht, gerendert worden.

Bei Inhalten die initial serverseitig gerendert werden, ist die Verwendung von <slot> Tags besonders praktisch.

 

Ausgabe von Daten über die data() Methode

Die data() Methode kann verwendet werden, um über den Mustache Syntax Daten in der .html Datei auszugeben. Wichtig in diesem Zusammenhang ist, dass Properties, die über die data() Methode definiert werden, auf alle Komponenten angewendet werden. Ist dies nicht der Wunsch, muss eine klassische Property (über @Prop()) verwendet werden (nähere Informationen dazu folgen).

Properties der data() Methode können direkt in der Komponenten-Klasse erstellt werden. Dazu wird die Methode data() definiert, welche ein Objekt zurückgibt, worin die Property definiert und initialisiert wird.

Die Ausgabe der myMessage Property erfolgt im Template der Komponente mittels des Mustache Syntax. In diesem Fall wird das Template der Komponente über den @Component Decorator übergeben:

Achtung: Sofern myMessage bereits als property (über @Prop()) verwendet wird, kann die Property der data() Methode nicht mehr in der .html Datei ausgegeben werden. Dies würde zu folgender Fehlermeldung führen:

Error The data property „myMessage“ is already declared as a prop. Use prop default value instead.

Verwende für ein und dieselbe Property entweder die data() Methode zur Ausgabe oder den @Prop() Decorator.

 

Ausgabe von Daten über den @Prop() Decorator

Damit Daten über den @Prop() Decorator definiert werden können, muss dieser einerseits über npm installiert und andererseits über einen Import importiert werden (Component kann über den vue-property-decorator oder über vue-class-component eingebunden werden, da laut Dokumentation dieselbe Komponenten-Klasse verwendet wird):

Properties, welche über den @Prop() Decorator erstellt werden, dienen dazu Komponenten mit demselben Setup individuelle Werte zu übergeben. Beispielsweise: Damit Dropdowns, die auf einer Komponente basieren, unterschiedliche options (<option></option>) anzeigen können, muss es möglich sein, dass Komponenten individuelle Informationen übergeben. Dazu werden Properties verwendet. Eine Property kann entweder mit oder ohne default Wert angelegt werden:

Die Befüllung der Property mit einem Wert erfolgt in der .html Datei über den Komponente-Tag.

Anmerkung: Properties die im camelCase Format sind, müssen in der .html Datei mittels eines Bindestrichs angesprochen werden:

myMessage > my-message

Wird kein Wert in der .html Datei angegeben, so wird der default Wert der Property, sofern dieser gesetzt wurde, gerendert.

 

Ausgabe von Daten über das Eltern Element

Manchmal ist es notwendig, dass Komponenten Werte rendern, die über das Eltern-Element übergeben werden. Dies ist besonders dann der Fall, wenn der Inhalt einer Komponente von äußeren Faktoren abhängig ist, beispielsweise Optionen eines Dropdowns, die asynchron geladen werden.

Damit Komponenten Werte des Eltern-Elements rendern können müssen folgende Dinge konfiguriert werden:

  1. Das Eltern-Element muss im data Objekt eine Property anlegen, welche dynamisch befüllt werden kann.
  2. In der .html Datei wird die Eltern-Property der Komponenten-Property übergeben. Dies wird mittels v-bind: durchgeführt.

    Es gibt für v-bind auch einen „shorthand“ – es kann das v-bind:my-message durch :my-message ersetzt werden. Dabei bezieht sich :my-message auf die Property der Komponente und myMessage in den Anführungszeichen auf die Property im Eltern-Element.

    Anmerkung dazu von Vue.js: „Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id=“{{ val }}“>, use <div :id=“val“>.“

 

Beispiel

Ausschnitt aus der index.html – Einbindung der Komponenten

 

Fazit

Vue.js ist eine mächtige Library, die relativ einfach zu verwenden ist. Die Blogreihe bietet eine gute Übersicht, wie Vue.js verwendet werden kann und soll für all jene hilfreich sein, die Vue.js mit TypeScript verwenden möchten. Ich persönlich habe Vue.js aufgrund seiner Einfachkeit lieben gelernt und würde, besonders in kleinen bis mittelgroßen Projekten und bei der Entwicklung von Prototypen, Vue.js einsetzen.

Was ich jeder Entwicklerin bzw. jedem Entwickler empfehle ist, sich gut zu überlegen, was mit dem Einsatz von Vue.js bezweckt werden soll und ob nicht ein anderes Framework oder eine andere Library sinnvoller wäre. Es sollte jeder Anwendungsfall für sich evaluiert werden. Ist letztendlich die Entscheidung getroffen worden, dass Vue.js verwendet wird – so sollte bereits vorab überlegt werden, wie die Projektstruktur
und Architektur der Applikation auszusehen hat, damit das Projekt in seiner Laufzeit nicht unübersichtlich wird.

Für einen weiteren Austausch stehe ich gerne zur Verfügung, einfach übers Kommentarfeld Kontakt mit mir aufnehmen! 🙂

 

Blogreihe zu Vue.js:

Passende Artikel

Antwort schreiben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*