Vue – Component via Mixin erweitern

Tutorial Vue

von Ardian Shala, 09.03.2019 - update: 10.03.2019
Ein Mixin ist ein wiederverwendbarer Schnipsel für Components und kann alle Optionen enthalten, die einer Component zugewiesen werden können.
Beim Extend eines Mixin werden alle Optionen zusammengeführt (merged).
Vorraussetzung:

Downloads:

Stackblitz Demo

Mixin erstellen

Ein simples Beispiel Mixin kann wie folgt aussehen:

const myMixin = {
  props: ['title'],
  template: `
    <div>{{ title }}</div>
  `
};

Es wird eine title-Property und ein Template definiert, welches die Property ausgibt.

Mixin anwenden

Um ein Mixin anwenden zu können, muss die Ziel-Component diese unter mixins aufführen.

const MyComponent = Vue.extend({
  mixins: [myMixin]
});

Component verwenden

Die zuvor definierte Component MyComponent kann nun verwendet werden.
Ihr steht somit die Property title zur Verfügung.

export default Vue.component('app', {
  components: { MyComponent },
  template: `
    <div class="p-4">
      <h2>Simple Mixin</h2>
      <MyComponent title="Hello Mixin" />
    </div>
  `
});

Fazit

Mittels Vue Mixin können Components mit wiederverwendbare Code-Schnipsel erweitert werden und diese Optionen verschieden implementieren.

#component #extend #mixin #vue

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.