javascript - How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

Question

I am using vue-loader (http://vuejs.github.io/vue-loader/start/spec.html) to construct my *.vue single-file components, but I am having trouble with the process from extending a single-file component from another.

If one component follows the spec to export default { [component "Foo" definition] }, I would think it is just a matter of importing this component (as I would with any child component) and then export default Foo.extend({ [extended component definition] })

Unfortunately this does not work. Can anyone please offer advice?

question from:https://stackoverflow.com/questions/35964116/how-do-i-extend-another-vuejs-component-in-a-single-file-component-es6-vue-loa

Answer 1

The proper way to do this would be to use mixins: http://vuejs.org/guide/mixins.html

Think of mixins as abstract components, which you can extend. So you could create a mixin with any functionality you wanted to have in both, and then just apply it to each of your components.