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

Question

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

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

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

Answer 1

经过一些测试，简单的解决方案是确保为任何正在扩展的组件导出Vue.extend()对象而不是普通对象。

就我而言，基本组件：

import Vue from 'vue'

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

和扩展组件：

import Foo from './Foo'

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

Answer 2

另一种可能性是extends选项：

import Foo from './Foo'

export default { extends: Foo }

Answer 3

执行此操作的正确方法是使用mixins：http://vuejs.org/guide/mixins.html

将mixins视为抽象组件，您可以扩展它们。因此，您可以创建一个mixin，其中包含您想要的任何功能，然后将其应用于您的每个组件。

Answer 4

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

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

Answer 5

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

而不是使用组件定义对象上的属性来定义组件，例如data，computed，methods等，Composition API允许您在声明并返回它们的地方创建一个setup函数。

示例：

文件：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>

使用Composition API声明组件的主要好处之一是，它使逻辑重用和提取变得非常容易。合成功能是使组件的功能模块化和可重用的一种最直接，最省钱的方式。