如何在单文件组件中扩展另一个 VueJS 组件？ (ES6 加载器)

Question

我正在使用 vue-loader 构建我的 *.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

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

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

Answer 3

另一种可能性是 extends 选项：

import Foo from './Foo'

export default { extends: Foo }

Answer 4

我会避免使用 Vue 的 "extends" 功能，仅仅是因为它是 Vue 的一个命名不当的方法。它并没有真正扩展任何东西，不是在继承的情况下。它所做的正是 mixin 所做的，它将两个组件合并在一起。它与模板代码无关，模板代码也不可扩展。 "extend" Vue 方法应该被称为 "merge"。

无论如何，Vue 必须使用 DOM 的层次结构，因此它构成了 DOM。同样的想法应该支配您的证监会大楼。将组件混入用于基本行为，并在需要该行为时将混入添加到组件中，同时将最小的公共部分组合成更大的部分，同时将模板代码保持在最低限度。在编写 SFC 时，您应该考虑 "thin views, think models"。 :)

Answer 5

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

而不是使用组件定义对象上的属性来定义您的组件，例如data、computed、methods 等，Composition API 允许您改为创建一个 setup 函数，并在其中声明 return 这些函数。

例子：

文件：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 声明组件的主要好处之一是它使逻辑重用和提取变得非常容易。组合函数是最直接的 cost-free 扩展组件的方法，方法是使组件的功能模块化和可重用。

如何在单文件组件中扩展另一个 VueJS 组件？ (ES6 加载器)

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

javascript

ecmascript-6

vue.js

es6-module-loader