Javascript 如何在单文件组件中扩展另一个 VueJS 组件？(ES6 vue-loader)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35964116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I extend another VueJS component in a single-file component? (ES6 vue-loader)
提问by Rhys
I am using vue-loader (http://vuejs.github.io/vue-loader/start/spec.html) to construct my *.vuesingle-file components, but I am having trouble with the process from extending a single-file component from another.
我正在使用 vue-loader ( http://vuejs.github.io/vue-loader/start/spec.html) 来构建我的*.vue单文件组件，但是我在扩展单文件组件的过程中遇到了问题从另一个。
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] })
如果一个组件遵循规范 to export default { [component "Foo" definition] }，我认为这只是导入这个组件的问题（就像我对任何子组件一样）然后export default Foo.extend({ [extended component definition] })
Unfortunately this does not work. Can anyone please offer advice?
不幸的是，这不起作用。任何人都可以提供建议吗？
采纳答案by Jeff
The proper way to do this would be to use mixins: http://vuejs.org/guide/mixins.html
正确的方法是使用 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.
将 mixin 视为抽象组件，您可以对其进行扩展。因此，您可以创建一个具有您想要在两者中都具有的任何功能的 mixin，然后将其应用于您的每个组件。
回答by Rhys
After some testing, the simple solution was to be sure to export a Vue.extend()object rather than a plain object for any component being extended.
经过一些测试，简单的解决方案是确保Vue.extend()为任何被扩展的组件导出一个对象而不是一个普通对象。
In my case, the base component:
就我而言，基本组件：
import Vue from 'vue'
export default Vue.extend({ [component "Foo" definition] })
and the extended component:
和扩展组件：
import Foo from './Foo'
export default Foo.extend({ [extended component definition] })
回答by Chris Gaudreau
Another possibility is the extendsoption:
另一种可能性是extends选项：
import Foo from './Foo'
export default { extends: Foo }
回答by Skooppa.com
I'd avoid the "extends" feature of Vue, simply because it is a poorly named method of Vue. It doesn't really extend anything, not in the case of inheritance. What it does is exactly what the mixin does, it merges the two components together. It has nothing to do with the template code, which isn't extensible either. The "extend" Vue method should have been called "merge".
我会避免使用 Vue 的“扩展”功能，仅仅因为它是 Vue 的一个命名不当的方法。它并没有真正扩展任何东西，不是在继承的情况下。它所做的正是 mixin 所做的，它将两个组件合并在一起。它与模板代码无关，也不可扩展。“扩展”Vue 方法应该被称为“合并”。
At any rate, Vue must work with the hierarchy of the DOM and thus it composes to the DOM. That same thinking should rule your SFC building. Use component mixins for base behavior and add the mixins to your components as you need that behavior, while composing together the smallest common parts into bigger parts, all at the same time keeping your template code to a minimum. You should think "thin views, think models" while composing your SFCs. :)
无论如何，Vue 必须处理 DOM 的层次结构，从而组成 DOM。你的证监会大楼也应该有同样的想法。将组件混合用于基本行为，并根据需要将混合添加到组件中，同时将最小的公共部分组合成更大的部分，同时将模板代码保持在最低限度。在编写 SFC 时，您应该考虑“细化视图，考虑模型”。:)
