Vue3组合式API下如何继承含模板/脚本/样式的组件？

Vue3不再支持Vue2那种通过Foo.extend()直接继承完整单文件组件（包含template、script、style）的方式，因为两者的组件构建逻辑差异较大。下面是可行的替代方案：

一、组件组合+Composables（官方推荐） #

这是Vue3中复用完整组件的最优方式，既可以复用原组件的template和style，又能通过Composables抽离复用逻辑，逻辑清晰且灵活。

实现示例： #

1. 先把原组件Foo.vue中的可复用逻辑抽离到Composable：

// useFooLogic.ts
import { ref } from 'vue'

export function useFooLogic() {
  // 原Foo组件中的数据和方法
  const localData = ref('初始数据')
  const handleEvent = (val: string) => {
    localData.value = val
  }

  return { localData, handleEvent }
}

2. 在新组件中引入原组件和Composable，复用并扩展：

<!-- Bar.vue -->
<template>
  <!-- 直接复用Foo的template结构 -->
  <Foo :some-prop="localData" @some-event="handleEvent">
    <!-- 通过插槽扩展原组件内容 -->
    <template #extra>
      <div>新增的自定义内容</div>
    </template>
  </Foo>
</template>

<script setup lang="ts">
import Foo from './Foo.vue'
import { useFooLogic } from './useFooLogic'

// 复用Foo的逻辑
const { localData, handleEvent } = useFooLogic()

// 新增扩展逻辑
const extendedMethod = () => {
  localData.value += '（已扩展）'
}
</script>

<style scoped>
/* 新增自定义样式，或通过深度选择器修改原组件样式 */
:deep(.foo-container) {
  border: 1px solid #eee;
}
</style>

二、Mixins（过渡方案，不推荐） #

如果只是想过渡复用脚本逻辑，可以用Mixins，但无法直接复用template和style，仍需通过组件引入来复用这两部分。官方不推荐Mixins，因为容易引发命名冲突，逻辑溯源困难。

实现示例： #

// FooMixin.ts
export default {
  data() {
    return {
      // 原Foo组件中的数据
    }
  },
  methods: {
    // 原Foo组件中的方法
  }
}

<!-- Bar.vue -->
<template>
  <!-- 复用Foo的template和style -->
  <Foo />
</template>

<script setup lang="ts">
import Foo from './Foo.vue'
import FooMixin from './FooMixin'
import { defineComponent } from 'vue'

// 在选项式API中使用Mixin
export default defineComponent({
  mixins: [FooMixin]
})
</script>

总结 #

Vue3中无法直接实现Vue2式的完整组件继承，推荐使用组件组合+Composables的方案，不需要依赖Mixins或插件即可复用组件的template、style和逻辑。

内容的提问来源于stack exchange，提问作者ekjcfn3902039