Javascript 如何在单个文件组件中扩展另一个VueJS组件？（ES6 vue加载器）

我正在使用vue loader（）构建我的

*.vue

单文件组件，但从另一个组件扩展单文件组件的过程中遇到了问题

如果一个组件按照规范导出默认值{[component“Foo”definition]}，我认为这只是导入这个组件（就像我对任何子组件一样）然后导出默认值Foo.extend（{[extended component definition]}）

---

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

经过一些测试后，简单的解决方案是确保导出

Vue.extend（）

对象，而不是任何正在扩展的组件的普通对象

在我的例子中，基本组件：

import Vue from 'vue'

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

import Foo from './Foo'

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

以及扩展组件：

import Vue from 'vue'

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

import Foo from './Foo'

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

---

正确的方法是使用mixin：

---

将mixin视为抽象组件，可以对其进行扩展。因此，您可以创建一个mixin，该mixin具有您希望在两者中都具有的任何功能，然后将其应用于您的每个组件。

另一种可能性是

扩展

选项：

import Foo from './Foo'

export default { extends: Foo }

我不想使用Vue的“扩展”特性，因为它是Vue的一个名称不好的方法。它实际上没有扩展任何东西，在继承的情况下也没有。它所做的正是mixin所做的，它将两个组件合并在一起。它与模板代码无关，模板代码也不可扩展。“extend”Vue方法应称为“merge”

---

无论如何，Vue必须与DOM的层次结构一起工作，因此它构成了DOM。同样的想法应该统治你的证监会大楼。将组件混合用于基本行为，并根据需要将混合添加到组件中，同时将最小的公共部分组合成更大的部分，同时将模板代码保持在最小。在编写SFC时，您应该考虑“精简视图，思考模型”：

从Vue 3开始，引入了Composition API，使得跨组件共享状态变得非常容易

合成API不使用组件定义对象上的属性定义组件，例如

数据

、

计算

、

方法

等，而是允许您创建一个

设置

函数，在其中声明并返回这些属性

一个例子：

文件：

useCounter.js

import { reactive, computed } from "vue";

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

  function increment() {
    state.count++
  }

  return {
    count,
    double,
    increment
  }
}

现在，计数器功能可以通过其设置功能无缝引入任何Vue组件：

文件：

MyComponent.vue

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

计数是：{{Count}，double是：{{double}
从“/useCounter”导入useCounter；
导出默认值{
设置（）{
常量{count，double，increment}=useCounter（）；
返回{
计数
双重的
增量
}
}
}

---

使用CompositionAPI声明组件的主要好处之一是，它使逻辑重用和提取非常容易。组合函数是通过使组件的功能模块化和可重用来扩展组件的最简单、最省钱的方法。

这是一个很酷的想法，很高兴你能理解它。我可以想象，在某些地方，这比直接混合我想要的东西要好，谢谢。这是比IMO公认的解决方案更好的答案，因为不能将整个组件混合，因为这会大大增加名称冲突的可能性。Mixin应该限制在较小的共享代码中。这对我来说很有效，但我必须小心重写函数。例如，像mounted这样的生命周期调用并没有被覆盖，奇怪的是，它们都被调用：it和它的super。但方法中声明的函数确实被覆盖。因此，我将需要重写的逻辑移到方法中，并从生命周期调用中调用它们。我更倾向于使用这种方法而不是混入，因为这感觉像是一种更传统的继承模式，但不幸的是，如果使用TypeScript而不是Javascript，这并不完全有效，因为“子”组件不会继承“父”组件的数据属性。令人沮丧的是，在TypeScript中，mixin也不能开箱即用。我最终设法让组件继承为TypeScript工作的方法是使用这个插件修复TypeScript的混合：我们是否可以扩展多个对象，比如导出默认值{extends:Foo，Bar，Baz}@Phantom007 mixins。是否有关于这方面的有用文档？模板是如何合并的？我可以添加第二个事件处理程序吗？等等这就是解决方案！：）警告：如果您在Vue项目中使用的是TypeScript而不是Javascript，那么mixin将无法立即正确编译。幸运的是，有人编写了一个包来解决这个问题：