web-dev-qa-db-fra.com

Comment étendre un autre composant VueJS dans un composant à fichier unique? (ES6 vue-loader)

J'utilise vue-loader ( http://vuejs.github.io/vue-loader/start/spec.html ) pour construire mes composants à fichier unique *.vue, Mais je J'ai du mal avec le processus d'extension d'un composant à fichier unique à partir d'un autre.

Si un composant suit la spécification à export default { [component "Foo" definition] }, Je pense qu'il s'agit simplement d'importer ce composant (comme je le ferais avec n'importe quel composant enfant) puis export default Foo.extend({ [extended component definition] })

Malheureusement ça ne fonctionne pas. Quelqu'un peut-il s'il vous plaît offrir des conseils?

javascriptecmascript-6vue.jses6-module-loader
27
Rhys

La bonne façon de le faire serait d'utiliser des mixins: http://vuejs.org/guide/mixins.html

Considérez les mixins comme des composants abstraits que vous pouvez étendre. Vous pouvez donc créer un mixin avec toutes les fonctionnalités que vous souhaitez avoir dans les deux, puis l'appliquer à chacun de vos composants.

17
Jeff

Après quelques tests, la solution simple était de s'assurer d'exporter un objet Vue.extend() plutôt qu'un objet brut pour n'importe quel composant en cours d'extension.

Dans mon cas, le composant de base:

import Vue from 'vue'

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

et le composant étendu:

import Foo from './Foo'

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

Une autre possibilité est l'option extends:

import Foo from './Foo'

export default { extends: Foo }
18
Chris Gaudreau

J'éviterais la fonction "étend" de Vue, simplement parce que c'est une méthode mal nommée de Vue. Cela ne prolonge vraiment rien, pas dans le cas de l'héritage. Ce qu'il fait est exactement ce que fait le mixin, il fusionne les deux composants ensemble. Cela n'a rien à voir avec le code du modèle, qui n'est pas non plus extensible. La méthode "extend" Vue aurait dû être appelée "merge".

En tout cas, Vue doit fonctionner avec la hiérarchie du DOM et donc il compose au DOM. Cette même pensée devrait régir votre bâtiment SFC. Utilisez des mixins de composants pour le comportement de base et ajoutez les mixins à vos composants car vous avez besoin de ce comportement, tout en composant ensemble les plus petites parties communes en plus grandes parties, tout en gardant votre code de modèle au minimum. Vous devriez penser "vues minces, penser modèles" lors de la composition de vos SFC. :)

3
Skooppa.com