Eigene Components in Vue.js

14. March 2017 - Javascript, Vue.js

Nun möchte ich euch noch zeigen, wie man in Vue.js seine eigenen Komponenten (Components) erstellen kann. Components sind nichts anderes als eine Aneinanderreihung von HTML Tags zur Wiederverwendung, gebündelt unter einem Namen. Dieser Name dient dann als eigenes HTML Tag.
Unseren bisherigen Tags wie <header>, <footer>, <h1>, <div> usw werden also jeweils erweitert um eine Component. In dieser Component können wir mehrere Divs verschachteln, mit Überschriften, Listen, Tabellen und was noch so alles zu diesem neuen Container gehört.

Später können wir dann einfach das neue HTML Tag an jede beliebige Stelle setzen, wie man es von den bereits vorhandenen Tags bereits kennt. Oder aber wir kopieren die Component einfach in ein neues Projekt, wenn es für dieses sinnvoll ist.

Möchten wir beispielsweise eine Tabelle mit Überschrift und zwei Buttons, einen zum Befüllen der Tabelle und einen zum Leeren der Tabelle, erstellen, so können wir hierfür eine Component anlegen.

Dies geschieht mit dem folgenden Aufruf:

Vue.component('my-component', {
  template: ''  			
})

my-component ist dabei der Name, den die Component am Ende bekommt und über die wir sie dann in unserem HTML Code einfügen können. Wir haben dementsprechend ab sofort ein HTML Tag <my-component>, den wir benutzen können.
Wichtig zu erwähnen ist jetzt vielleicht noch, dass wir diesen HTML Tag nur in Containern benutzen können, welche einer Vue Instanz über das Attritbut ‘el’ zugeordnet worden sind. Wir können also unsere <my-component> nur in einem Div mit der id #newContainer verwenden, wenn es auch eine passende Vue Instanz gibt.
Diese würde dann so aussehen:

new Vue({
  el: '#newContainer'
});

Wir können unsere gewünschten Container nun in die ‘ ‘ des template Attributs der Component schreiben.
Möchten wir unser Beispiel von oben implementieren, mit der Überschrift, der Tabelle und den zwei Buttons zum Befüllen und Leeren, würde die Component am Ende so aussehen:

Vue.component('my-component', {
  template: '<div><h1>Ich bin eine Tabelle</h1><ul>'
  +'<li>Eins</li><li>Zwei</li></ul>'
  +'<button>Liste befüllen</button><button>Liste leeren</button>'
  +'</div>'  			
});

Ihr könntet die Tags im template auch hintereinander, also in einer Reihe schreiben. Möchtet ihr es aber übersichtlicher gestallten und euren Code über mehrere Zeilen schreiben, müsst ihr aus jeder Zeile einen eigenen String machen und diese via + miteinander verbinden.
Wenn ihr einfach so in die nächste Zeile wechselt werdet ihr einen Fehler erhalten.

Mein HTML Code sieht dann so aus:

<div id="newContainer">
<my-component></my-component>
</div>

Im Browser sollte eure erste Component dann in etwa so aussehen:

Erste eigene Component, Liste mit Überschrift und zwei Buttons

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

Leave a Reply