Vue.js – Component via Mixin erweitern

Downloads:

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.