Software-Entwicklung

Teil 3: Erstellung einer klassenbasierten Vue.js Komponente

Heute wollen wir uns damit beschäftigen, wie Vue.js Komponenten klassenbasiert verwendet werden können. Anhand eines einfachen Beispiels, wo die Komponente über den AppController eingebunden wird, möchte ich Ihnen die Vorgangsweise veranschaulichen.

Puzzle_740x415

 

Vue.js bietet die Möglichkeit sogenannte Komponenten zu erstellen. Diese sind in sich geschlossene Instanzen, welche der Vue Instanz hinzugefügt werden.

 

Installieren von Vue.js Erweiterungen über npm

Damit Komponenten klassenbasiert erstellt werden können werden folgende Erweiterungen für Vue.js benötigt:

npm install --save vue-class-component@6.1.2
npm install --save vue-property-decorator@6.0.0

Des Weiteren ist es notwendig, dass Decorators in der tsconfig.json erlaubt werden, damit die .ts Datei kompiliert.

// in der tsconfig.json 

"compilerOptions": {
  ...
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true
}

Erstellung einer Vue.js Komponente als Klasse

Eine Vue.js Komponente ist eine Klasse, die von Vue erbt und die den Decorator @Component zur Kennzeichnung, dass es sich dabei um eine Komponente handelt, verwendet. Über den @Component({}) Decorator werden diverse Informationen über die Komponente angegeben.

Prinzipiell gibt es Optionen (Informationen die übergeben werden können) in der Komponente, die direkt in der Klasse ausformuliert werden können (z.B.: die Lifecycle Hook Methoden), aber auch Optionen welche nur über den Decorator (z.B.: name und template) übergeben werden können.

Grundsätzlich muss jede Komponente ein Template besitzen, damit Vue.js weiß, wie die Komponente gerendert werden soll. Wie das Template angegeben wird, ist dem Entwickler selbst überlassen. Es gibt diverse Möglichkeiten ein Template zu nutzen.

// ./src/Components/Message.ts

import Vue from "vue";
import Component from 'vue-class-component';

@Component({
  name:"message",
  template: "<p><span>{{myMessage}}</span></p>"
})
export default class Message extends Vue {
   private data() {
    return{
      myMessage: "Ich bin eine Vue Komponente"
    }
  }

  private mounted() {
    console.log('Komponenten ist gemounted worden.');
  }

}

Informationen, die über eine Text Interpolation ausgegeben werden sollen, müssen entweder über die data() Methode zur Verfügung gestellt werden, oder aber über sogenannte Properties (nähere Informationen dazu folgen im Teil 4). In diesem Fall wird myMessage über die data() Methode übergeben.

 

Registrieren der Vue.js Komponenten im AppController

Bei der nicht klassenbasierten Erstellung einer Vue.js Komponente ist es möglich, je nachdem wie die Komponente erstellt wurde, sie bereits bei der Erstellung zu registrieren, oder aber auch nicht. Hingegen bei der klassenbasierten Komponente muss die Registrierung noch erfolgen. Dazu wird die Komponente im AppController importiert und im super() Konstruktor über die Option components hinzugefügt.

// ./src/Controller/AppController.ts

import Vue from "vue";
import Message from "../Components/Message";

export default class AppController extends Vue {

  constructor() {
    super({
      el: '#app',
      components: {
        message: Message
      }
    })
  }

  ...
}

Verwendung einer registrieren Vue.js Komponente

Registrierte Komponenten können über einen “custom tag” im HTML verwendet werden. Im Kontext des AppControllers (jedes Element das sich in dem div #app befindet) kann eine Komponente beliebig oft genutzt werden. Der Name des “custom tags” richtet sich nach dem Namen, der im AppController unter der Option component angegeben wurde. In diesem Fall ist dies message.

// ./index.html code

…
<body>
  <div id="app">
    {{output}}
    <message></message>
  </div>
</body>

Das gerenderte HTML würde dann wie folgt aussehen:

 Tag" >// ./index.html gerendert
…
<body>
  <div id="app">
      Hello World
      <p><span> Ich bin eine Vue Komponente </span></p>
  </div>
</body>

Komponenten sind ein mächtiges Werkzeug, um Elemente mit gekapselter Funktionalität zur Verfügung zu stellen. Beispiele, die sich als Komponenten gut eignen, sind Elemente, welche durch andere Libraries gerendert werden (z.B.: select2 Dropdowns und jQuery UI Datepicker). Diese können zwar unabhängig von Vue.js genutzt werden, jedoch wird es kompliziert, wenn Werte, die über diese Elemente gesetzt werden, an eine Vue Instanz übergeben werden sollen (wie es oftmals bei einem Formular der Fall ist). Aus diesem Grund ist die Verwendung von Komponenten empfehlenswert.

Dieser Artikel hat gezeigt wie Komponenten klassenbasiert verwendet werden können. Teil 4 der Blogreihe wird sich mit dem Übergeben von Daten an die Komponente beschäftigen und zeigen, wie Komponenten mit dem gleichen Setup mit unterschiedlichen Inhalten gerendert werden können.

 

Blogreihe zu Vue.js:

Passende Artikel

2 Kommentare

  1. Vielen Dank für die Artikel über Vue.js in Verbindung mit TS.
    Wir sind auch grade dabei das für ein Projekt auszuprobieren. Dazu würde ich gerne wissen, wie Sie das mit Services gelöst haben, die in die einzelnen Komponenten eingebunden werden?

    • Christina Hauk sagt:

      Hallo!

      Freut mich, dass meine Artikelserie hilfreich ist! Ich hoffe ich habe die Frage richtig verstanden: grundsätzlich haben wir – je nach Kontext – pro Komponente einen Service. Grundsätzlich ist ein Service eine Klassen – die unabhängig von Vue.js ist. Dieser Service wird wie jede andere Klasse importiert. Ich tendiere dazu, einen Service als Singleton anzulegen, indem ich nicht die class exportiere sondern eine Instanz.
      // export in message.service.ts
      class MessageService{};
      let messageService = new MessageService();
      export { messageService }

      //import in AppController.ts
      import { messageService } from ‚./message.servicec.ts‘;

      Wichtig ist meiner Meinung nach, dass die Logiken getrennt sind – was Vue spezifisch ist würde ich im Controller lassen, was reine Logik ist bzw. Schnittestllen (zB Rest calls) würde ich in den Service auslagern.

      Ich hoffe, meine Antowrt hilft dir! LG Christina