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

JavaScript

西门达蒙

2020-03-12

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

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

不幸的是，这不起作用。谁能提供建议？

第927篇《如何在单文件组件中扩展另一个VueJS组件？（ES6 vue-loader）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
ItachiGreen 2020.03.12

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

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

SamStafan十三 2020.03.12

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android