blocks|key|417060|text|正确的方法是使用mixins：http://vuejs.org/guide/mixins.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|417061|将mixins看作抽象组件，您可以对其进行扩展。因此，您可以创建一个混合功能，并将其应用到您的每个组件中。|417062|entityMap|0|LINK|mutability|MUTABLE|url|http://vuejs.org/guide/mixins.html^0|F|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

The proper way to do this would be to use mixins: <a href="http://vuejs.org/guide/mixins.html" rel="noreferrer">http://vuejs.org/guide/mixins.html</a>

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.

blocks|key|18643|text|经过一些测试后，简单的解决方案是确保导出一个Vue.extend()对象，而不是为任何被扩展的组件导出一个普通对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|18644|在我的例子中，基本组件：|18645|import+Vue+from+'vue'

export+default+Vue.extend({+[component+"Foo"+definition]+})|code-block|syntax|javascript|18646|以及扩展的组件：|18647|import+Foo+from+'./Foo'

export+default+Foo.extend({+[extended+component+definition]+})|18648|entityMap^0|M|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

After some testing, the simple solution was to be sure to export a <code>Vue.extend()</code> object rather than a plain object for any component being extended.

In my case, the base component:

<pre><code>import Vue from 'vue'

export default Vue.extend({ [component "Foo" definition] })
</code></pre>

and the extended component:

<pre><code>import Foo from './Foo'

export default Foo.extend({ [extended component definition] })
</code></pre>

blocks|key|18722|text|另一种可能是extends选项：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|18723|import+Foo+from+'./Foo'

export+default+{+extends:+Foo+}|code-block|syntax|javascript|18724|entityMap^0|6|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Another possibility is the <code>extends</code> option:

<pre><code>import Foo from './Foo'

export default { extends: Foo }
</code></pre>

blocks|key|413893|text|我会避免Vue的“扩展”特性，因为它是Vue的一个名称不太好的方法。它并没有真正扩展任何东西，在继承的情况下更是如此。它所做的正是混合器所做的，它将两个组件合并在一起。它与模板代码无关，模板代码也是不可扩展的。"extend“方法应该被称为"merge”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413894|无论如何，Vue必须使用DOM的层次结构，因此它构成DOM。同样的想法应该会支配你的证监会大楼。将组件混合用于基本行为，并在需要时将这些混合添加到组件中，同时将最小的公共部分组合到更大的部分，同时将模板代码保持在最低限度。在组成SFCs时，您应该考虑“瘦视图，考虑模型”。:)|413895|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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". 

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. :)

blocks|key|775280|text|从Vue+3开始，引入了组合API，使得在组件之间共享状态变得非常容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775281|与使用组件定义对象(例如data、computed、methods等)上的属性定义组件不同，复合API允许您创建一个声明并返回这些属性的setup函数。|offset|length|style|CODE|775282|一个例子：|BOLD|775283|文件：useCounter.js|775284|import+{+reactive,+computed+}+from+"vue";

export+default+function+{
++const+state+=+reactive({
++++count:+0,
++++double:+computed(()+=>+state.count+*+2)
++});

++function+increment()+{
++++state.count%2B%2B
++}

++return+{
++++count,
++++double,
++++increment
++}
}|code-block|syntax|javascript|775285|现在，计数器功能可以使用它的安装功能无缝地引入到任何Vue组件中：|775286|文件：MyComponent.vue|775287|<template>
+++<button+@click="increment">
++++++Count+is:+{{+count+}},+double+is:+{{+double+}}
+++</button>
</template>

<script>
import+useCounter+from+"./useCounter";

export+default+{
++setup()+{
++++const+{+count,+double,+increment+}+=+useCounter();
++++return+{
++++++count,
++++++double,
++++++increment
++++}
++}
}
</script>|775288|使用组合API声明组件的主要好处之一是它使逻辑重用和提取非常容易。组合功能是通过使组件的特性模块化和可重用来扩展组件的最简单、最免费的方法。|775289|entityMap^0|0|C|4|H|8|Q|7|1W|5|0|0|5|0|3|D|0|0|0|3|F|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@$D|13|E|14|F|G]|$D|15|E|16|F|G]|$D|17|E|18|F|G]|$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@$D|1C|E|1D|F|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|M|3|N|5|O|7|1H|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1I|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1J|8|@$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|V|3|W|5|O|7|1M|8|@]|9|@]|A|$P|Q]]|$1|X|3|Y|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|10|$]]

As of Vue 3, the Composition API is introduced, making it very easy to share state across components.
Rather than defining your component with properties on the component definition object e.g. <code>data</code>, <code>computed</code>, <code>methods</code>, etc, the Composition API allows you to instead create a <code>setup</code> function where you declare and return these.
An example:
file: <code>useCounter.js</code>
<pre><code>import { reactive, computed } from &quot;vue&quot;;

export default function {
 const state = reactive({
 count: 0,
 double: computed(() =&gt; state.count * 2)
 });

 function increment() {
 state.count++
 }

 return {
 count,
 double,
 increment
 }
}
</code></pre>
Now the counter feature can be seamlessly introduced into any Vue component using it's setup function:
file: <code>MyComponent.vue</code>
<pre><code>&lt;template&gt;
 &lt;button @click=&quot;increment&quot;&gt;
 Count is: {{ count }}, double is: {{ double }}
 &lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
import useCounter from &quot;./useCounter&quot;;

export default {
 setup() {
 const { count, double, increment } = useCounter();
 return {
 count,
 double,
 increment
 }
 }
}
&lt;/script&gt;
</code></pre>
One of the main benefits of declaring a component using the Composition API is that it makes logic reuse and extraction very easy. Composition functions are the most straightforward and cost-free way of extending a component by making its features modular and reusable.

I am using <a href="https://vue-loader.vuejs.org/" rel="nofollow noreferrer">vue-loader</a> to construct my <code>*.vue</code> single-file components, but I am having trouble with the process of extending a single-file component from another.
If one component follows the spec to <code>export default { [component &quot;Foo&quot; definition] }</code>, I would think it is just a matter of importing this component (as I would with any child component) and then <code>export default Foo.extend({ [extended component definition] })</code>
Unfortunately this does not work. Can anyone please offer advice?

How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用构造我的*.vue单文件组件，但是我在从另一个文件组件扩展单个文件组件的过程中遇到了问题。如果一个组件遵循规范到export default { [component "Foo" definition] }，我认为这只是一个导入该组件的问题(就像我对任何子组件一样)，然后是export default Foo.extend({ [extended component definition

问如何在单个文件组件中扩展另一个VueJS组件？(ES6 vue-加载程序)
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单个文件组件中扩展另一个VueJS组件？(ES6 vue-加载程序)EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单个文件组件中扩展另一个VueJS组件？(ES6 vue-加载程序)
EN