Vue3组件间共享Props的最佳实践疑问

针对你从Vue2转Vue3后遇到的共享输入组件Props的问题，直接给你几个实用方案，以及mixins的现状分析：

1. Composition API：用类型推导+默认值复用实现Props共享 #

Vue3的defineProps确实不能直接导入外部定义的Props对象，但可以通过TS类型+默认值分离的方式实现复用，同时保留IDE的类型提示：

步骤1：在外部文件定义类型和默认值 #

创建sharedInputProps.ts：

// 定义共享Props的类型
export type SharedInputProps = {
  type?: 'text' | 'password' | 'email'
  name: string  // 必填项
  placeholder?: string
}

// 定义非必填项的默认值（注意排除必填的name）
export const sharedInputDefaults: Omit<SharedInputProps, 'name'> = {
  type: 'text',
  placeholder: ''
}

步骤2：在组件中引用 #

在输入组件的<script setup lang="ts">中：

<script setup lang="ts">
import type { SharedInputProps } from './sharedInputProps'
import { sharedInputDefaults } from './sharedInputProps'

// 通过泛型传入共享类型，并用withDefaults绑定默认值
const props = withDefaults(defineProps<SharedInputProps>(), sharedInputDefaults)

// 组件内可以直接使用props.type、props.name等，IDE会自动补全类型
</script>

这种方式完全符合Vue3 Composition API的设计，PHPStorm也能正常识别类型提示。

2. Options API：修复外部Props的类型提示问题 #

如果你更倾向于用Options API，之前没有类型提示的问题大概率是没给共享Props对象加上as const断言，导致TS无法保留精确的字面量类型，IDE无法识别。

修正后的sharedInputProps.ts： #

import type { PropType } from 'vue'

export const sharedInputProps = {
  type: {
    type: String as PropType<'text' | 'password' | 'email'>,
    default: 'text'
  },
  name: {
    type: String,
    required: true
  },
  placeholder: {
    type: String,
    default: ''
  }
} as const // 关键：用as const让TS保留精确类型，IDE才能识别提示

组件中使用： #

<script lang="ts">
import { sharedInputProps } from './sharedInputProps'

export default {
  props: {
    // 展开共享Props
    ...sharedInputProps,
    // 添加组件专属的Props
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

加上as const后，PHPStorm就能对共享Props提供完整的类型提示和自动补全了。

3. 关于mixins的现状 #

Vue3虽然兼容mixins，但官方并不推荐将其作为共享Props的最佳方案：

• mixins存在命名冲突风险（多个mixins的Props/方法重名时难以排查）
• 组件的Props来源不清晰，后期维护时很难追踪某个Props是来自哪个mixin
• 相比之下，上面两种方案更直观、类型更安全，也符合Vue3的组合式设计理念

如果当前mixins的方案能满足需求，短期内可以继续用，但长远来看更建议迁移到上面的类型复用方案。

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