javascript - single - vue js componente

¿Cómo extiendo otro componente VueJS en un componente de un solo archivo?(ES6 vue-loader)

Question

Estoy usando vue-loader ( http://vuejs.github.io/vue-loader/start/spec.html ) para construir mis componentes de archivo único *.vue , pero tengo problemas con el proceso al extender un solo archivo. -archivo componente de otro.

Si un componente sigue la especificación para export default { [component "Foo" definition] } , creo que solo es cuestión de importar este componente (como lo haría con cualquier componente secundario) y luego export default Foo.extend({ [extended component definition] })

Por desgracia, esto no funciona. ¿Alguien puede por favor ofrecer consejo?

Answer 1

Después de algunas pruebas, la solución simple fue asegurarse de exportar un objeto Vue.extend() lugar de un objeto plano para cualquier componente que se extienda.

En mi caso, el componente base:

import Vue from ''vue''

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

y el componente extendido:

import Foo from ''./Foo''

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

Answer 2

Evitaría la característica "amplia" de Vue, simplemente porque es un método de Vue mal llamado. Realmente no se extiende nada, no en el caso de la herencia. Lo que hace es exactamente lo que hace la mezcla, combina los dos componentes juntos. No tiene nada que ver con el código de la plantilla, que tampoco es extensible. El método "extender" de Vue debería haberse llamado "fusionar".

En cualquier caso, Vue debe trabajar con la jerarquía del DOM y, por lo tanto, se compone al DOM. Ese mismo pensamiento debe gobernar su edificio SFC. Use mixins de componentes para el comportamiento básico y agregue los mixins a sus componentes cuando los necesite, al tiempo que compone las partes comunes más pequeñas en partes más grandes, todo al mismo tiempo, manteniendo el código de la plantilla al mínimo. Debería pensar "visiones finas, modelos de pensamiento" al componer sus SFC. :)

Answer 3

La forma correcta de hacer esto sería usar mixins: http://vuejs.org/guide/mixins.html

Piense en los mixins como componentes abstractos, que puede extender. Así que podría crear una mezcla con cualquier funcionalidad que quisiera tener en ambos y luego aplicarla a cada uno de sus componentes.

Answer 4

Otra posibilidad es la opción de extends :

import Foo from ''./Foo''

export default { extends: Foo }