Wie verlängere ich ein anderes VueJS-Komponente in einer einzigen Datei component? (ES6 vue-loader)

Bin ich mit vue-loader (http://vuejs.github.io/vue-loader/start/spec.html) zu konstruieren, meine *.vue single-Datei-Komponenten, aber ich habe Probleme mit dem Prozess von Erweiterung einer single-file-Komponente von einem anderen.

Wenn eine Komponente folgt die Spezialisierung export default { [component "Foo" definition] } würde ich denken, es ist nur eine Frage der Import dieser Komponente (als würde ich mit jedem Kind Komponente) und dann export default Foo.extend({ [extended component definition] })

Leider funktioniert dies nicht. Kann jemand bitte beraten?

InformationsquelleAutor der Frage Rhys | 2016-03-12

  1. 11

    Den richtigen Weg, dies zu tun wäre die Verwendung von Mixins in Verbindung: http://vuejs.org/guide/mixins.html

    Denken von Mixins in Verbindung als abstrakte Komponenten, die Sie erweitern können. So könnten Sie ein mixin mit allen Funktionen, die Sie haben wollte in beide, und dann wenden Sie es auf jede Ihrer Komponenten.

    InformationsquelleAutor der Antwort Jeff

  2. 30

    Nach einigen Tests, die einfache Lösung war, um sicher zu sein, exportieren Sie eine Vue.extend() Objekt eher als ein schlichtes Objekt für jede Komponente erweitert.

    In meinem Fall, die Basis-Komponente:

    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] })

    InformationsquelleAutor der Antwort Rhys

  3. 16

    Andere Möglichkeit ist die extends option:

    import Foo from './Foo'

export default { extends: Foo }

    InformationsquelleAutor der Antwort Chris Gaudreau

Schreibe einen Kommentar