vue3 + vite声明有多个继承

在 Vue 3 中，如果要在 Vite 项目中声明一个组件同时继承自多个基础组件（也称为“混入” Mixins），你可以通过将多个混入插件作为 `extendOptions.mixins` 的数组元素来实现。每个混入插件是一个对象，通常包含了组件需要共享的功能或数据结构。

假设你有两个混入插件，分别叫做 `MixinA` 和 `MixinB`：

// mixins/MixinA.js
export default {
  data() {
    return {
      mixinAProperty: 'from Mixin A'
    }
  },
  methods: {
    mixinAMethod() {
      console.log('This is a method from Mixin A');
    }
  }
}

// mixins/MixinB.js
export default {
  computed: {
    mixinBComputed() {
      return 'from Mixin B';
    }
  },
  mounted() {
    console.log('Component mounted with Mixin B');
  }
}

然后在你的组件文件里，比如 `MyComponent.vue`：

<template>
  <div>
    {{ mixinAProperty }} - {{ mixinBComputed }}
  </div>
</template>

<script>
import MixinA from '@/mixins/MixinA';
import MixinB from '@/mixins/MixinB';

export default {
  extends: {
    // 继承的基础组件，可以是其他Vue组件或基本组件选项
  },
  mixins: [MixinA, MixinB], // 混入多个混入
  data() {
    return {
      localData: 'Local component data',
    };
  },
  // ... 其他组件特有的生命周期钩子、计算属性等
};
</script>

现在，`MyComponent` 将会拥有来自 `MixinA` 和 `MixinB` 的所有属性和方法。