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

我正在使用vue-loader(http://vuejs.github.io/vue-loader/start/spec.html)构造*.vue单文件组件,但是我在扩展单文件组件的过程中遇到麻烦从另一个。

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

不幸的是,这不起作用。谁能提供建议?

ItachiGreen2020/03/12 11:10:36

我会避免使用Vue的“扩展”功能,只是因为它是Vue的一个命名不佳的方法。它实际上并没有扩展任何东西,就继承而言。它所做的正是mixin所做的,它将两个组件合并在一起。它与模板代码无关,后者也不可扩展。“扩展” Vue方法应该称为“合并”。

无论如何,Vue必须使用DOM的层次结构,因此它构成了DOM。同样的想法应该统治您的SFC建设。将组件混合器用于基本行为,并在需要时将混合器添加到您的组件中,同时将最小的公共部分组合成更大的部分,同时将模板代码保持在最低限度。在编写SFC时,您应该考虑“精简视图,考虑模型”。:)

SamStafan十三2020/03/12 11:10:35

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

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