Wie erweitere ich eine andere VueJS-Komponente in einer einzelnen Dateikomponente? (ES6 vue-loader)

Question

Ich benutze vue-loader (http://vuejs.github.io/vue-loader/start/spec.html), um meine *.vue Single-File-Komponenten zu erstellen, aber ich habe Probleme mit dem Prozess von einer Komponente aus einer einzigen Datei von einem anderen zu erweitern.

Wenn eine Komponente die Spezifikation zu export default { [component "Foo" definition] } folgt, würde ich denke, es ist nur eine Frage, diese Komponente zu importieren (wie ich bei jeder anderen Kind-Komponente) und dann export default Foo.extend({ [extended component definition] })

Leider funktioniert das nicht. Kann mir jemand bitte einen Rat geben?

Answer 1

Der richtige Weg, dies zu tun, wäre Mixins zu verwenden: http://vuejs.org/guide/mixins.html

Denken Sie an Mixins als abstrakte Komponenten, die Sie erweitern können. Sie können also ein Mixin mit allen Funktionen erstellen, die Sie in beiden haben möchten, und es dann einfach auf jede Ihrer Komponenten anwenden.

Answer 2

Nach einigen Tests bestand die einfache Lösung darin, ein Vue.extend() Objekt anstelle eines einfachen Objekts für jede Komponente zu exportieren, die erweitert wurde.

In meinem Fall die Basiskomponente:

import Vue from 'vue' 

export default Vue.extend({ [component "Foo" definition] }) 

und die erweiterte Komponente:

import Foo from './Foo' 

export default Foo.extend({ [extended component definition] }) 

Answer 3

Eine weitere Möglichkeit ist die extends Option:

import Foo from './Foo' 

export default { extends: Foo }