如何在单文件组件中扩展另一个 VueJS 组件？ (ES6 vue-loader)

Question

我正在使用 vue-loader 来构建我的 *.vue 单文件组件，但是我在从另一个扩展单文件组件的过程中遇到了麻烦。

如果一个组件遵循 export default { [component "Foo" definition] } 的规范，我认为这只是导入这个组件（就像我对任何子组件一样）然后 export default Foo.extend({ [extended component definition] })

不幸的是，这不起作用。任何人都可以提供建议吗？

原文由 Rhys 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正确的方法是使用 mixins：http: //vuejs.org/guide/mixins.html

将 mixins 视为可以扩展的抽象组件。因此，您可以创建一个具有您想要在两者中具有的任何功能的 mixin，然后将其应用于您的每个组件。

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

经过一些测试，简单的解决方案是确保导出一个 Vue.extend() 对象，而不是任何扩展组件的普通对象。

就我而言，基本组件：

 import Vue from 'vue'

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

和扩展组件：

 import Foo from './Foo'

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

原文由 Rhys 发布，翻译遵循 CC BY-SA 3.0 许可协议