Come estendere un altro componente VueJS in un componente a singolo file? (ES6 vue-loader)

Question

Sto usando vue-loader (http://vuejs.github.io/vue-loader/start/spec.html) per costruire i miei *.vue componenti singolo file, ma sto avendo difficoltà con il processo da estrarre un componente singolo file da un altro.

Se un componente segue le specifiche per export default { [component "Foo" definition] }, io penso che sia solo una questione di importazione di questa componente (come farebbe con qualsiasi componente figlio) e poi export default Foo.extend({ [extended component definition] })

Purtroppo questo non funziona. Qualcuno può offrire consigli?

Answer 1

Il modo corretto per farlo sarebbe quello di utilizzare mixins: http://vuejs.org/guide/mixins.html

Pensate mixin come componenti astratti, che puoi estendere. In questo modo è possibile creare un mixin con qualsiasi funzionalità che si desidera avere in entrambi e quindi applicarlo a ciascuno dei componenti.

Answer 2

Dopo alcuni test, la soluzione più semplice è stato quello di essere sicuri di esportare un oggetto Vue.extend() piuttosto che un oggetto sotto gli occhi di tutte le componenti da estendere.

Nel mio caso, il componente di base:

import Vue from 'vue' 

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

e la componente estesa:

import Foo from './Foo' 

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

Answer 3

Un'altra possibilità è l'opzione extends:

import Foo from './Foo' 

export default { extends: Foo }