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

Question

我正在使用vue-loader(http://vuejs.github.io/vue-loader/start/spec.html)来构建我的*.vue单文件组件,但是我在扩展单文件组件时遇到了问题从另一个.

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

不幸的是,这不起作用.有人可以提供建议吗？

Answer 1

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

在我的例子中,基本组件:

import Vue from 'vue'

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

和扩展组件:

import Foo from './Foo'

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

Answer 2

另一种可能性是extends选项:

import Foo from './Foo'

export default { extends: Foo }

Answer 3

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

将mixins视为抽象组件,您可以扩展它们.因此,您可以创建一个具有您想要的任何功能的mixin,然后将其应用于每个组件.

Answer 4

我会避免使用 Vue 的“扩展”功能，只是因为它是 Vue 的一个命名不当的方法。它并没有真正扩展任何东西，在继承的情况下则不然。它所做的正是 mixin 所做的，它将两个组件合并在一起。它与模板代码无关，模板代码也不可扩展。“扩展”Vue 方法应该被称为“合并”。

无论如何，Vue 必须使用 DOM 的层次结构，从而组成 DOM。您的证监会大楼也应该遵循同样的想法。使用组件混合来实现基本行为，并根据需要将混合添加到组件中，同时将最小的公共部分组合成更大的部分，同时将模板代码保持在最低限度。在编写 SFC 时，您应该考虑“简单视图、思考模型”。:)