如何将Vue Class API的extends转换为Composition API？组件继承异常求助

在Vue 3的<script setup>语法中不支持extends选项，这是你转换后继承失效、props异常的核心原因。Composition API更推荐用**组合式函数（Composables）**实现逻辑复用，若要保留类继承的写法，可采用「选项式API + Composition API混合」的方式。

方案1：用组合式函数实现逻辑复用（推荐） #

这是符合Composition API设计理念的最佳实践，通过抽离可复用逻辑，替代传统的组件继承。

1. 定义组合式函数 #

新建useMessageType.js文件，抽离props校验和逻辑：

import { defineProps } from 'vue'

export function useMessageType(propsDef) {
  const props = defineProps(propsDef)
  return { props }
}

2. 基础组件（BaseComponent.vue） #

<template>
  <div>
    <h3>prop type: {{ typeof props.message }}</h3>
  </div>
</template>

<script setup>
import { useMessageType } from './useMessageType'

const { props } = useMessageType({
  message: {
    type: String,
    required: false
  }
})
</script>

3. 扩展组件（ExtendedComponent.vue） #

复用基础组件的模板，同时重写props类型：

<template>
  <BaseComponent v-bind="$props" />
</template>

<script setup>
import { useMessageType } from './useMessageType'
import BaseComponent from './BaseComponent.vue'

const { props } = useMessageType({
  message: {
    type: Number,
    required: false
  }
})
</script>

方案2：混合选项式与Composition API（保留extends） #

如果需要保留原有的组件继承结构，可以放弃<script setup>，用普通<script>结合Composition API的setup函数：

1. 基础组件（BaseComponent.vue） #

<template>
  <div>
    <h3>prop type: {{ typeof message }}</h3>
  </div>
</template>

<script>
export default {
  name: "BaseComponent",
  props: {
    message: {
      type: String,
      required: false
    }
  },
  setup(props) {
    // 这里可以写Composition API逻辑
    return { props }
  }
};
</script>

2. 扩展组件（ExtendedComponent.vue） #

<script>
import BaseComponent from "./BaseComponent";

export default {
  name: "ExtendedComponent",
  extends: BaseComponent,
  props: {
    message: {
      type: Number,
      required: false
    }
  },
  setup(props) {
    // 这里可以写扩展后的Composition API逻辑
    return { props }
  }
};
</script>

关键说明 #

• <script setup>是语法糖，设计初衷是简化单文件组件开发，但不支持extends、mixins等选项式API特性；
• 组合式函数是Composition API的核心复用方式，相比组件继承更灵活，逻辑边界更清晰；
• 若必须使用组件继承，只能用普通<script>配合extends选项，同时可以在setup函数中编写Composition API代码。

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