Vue3 Props两种用法对比：合并传参vs单独传参哪个更优？

先明确两种写法的具体示例，方便理解：

写法一：单个对象Props #

通过一个对象类型的Props接收所有配置，再用computed提取具体属性：

<script setup>
import { computed } from 'vue'

const props = defineProps({
  customSearchConfig: {
    type: Object,
    default: () => ({})
  }
})

// 提取具体属性并设置默认值
const placeholder = computed(() => props.customSearchConfig.placeholder || '请输入')
const backgroundColor = computed(() => props.customSearchConfig.backgroundColor || '#fff')
</script>

写法二：单独定义每个Props #

将每个配置项作为独立的Props声明：

<script setup>
const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入'
  },
  backgroundColor: {
    type: String,
    default: '#fff'
  }
})
</script>

一、单个对象Props的优缺点 #

优点 #

• 聚合配置，简化代码：当组件有大量关联配置项时，用单个对象能避免Props列表过长，父组件传参时也只需传递一个对象，不用逐个写属性。
• 配置复用性高：如果多个子组件实例需要相同配置，或者同一配置要在多处使用，提前定义好配置对象就能直接复用，减少重复代码。
• 扩展灵活：后续新增配置项时，只需在对象里添加属性，无需修改defineProps的结构，对组件现有代码的侵入性小。

缺点 #

• 可读性差，依赖文档：仅看Props定义无法知道组件需要哪些具体配置，必须查看组件内部的computed或文档，新人接手成本高。
• 类型提示缺失：IDE无法自动提示配置对象内的属性，容易出现拼写错误，开发体验不如单独定义Props。
• 默认值与校验繁琐：每个子属性的默认值都要在computed中手动判断，无法像单独Props那样直接在定义中设置；对象类型的Props也很难做精细化的参数校验，容易出现非法配置。

二、单独定义Props的优缺点 #

优点 #

• 直观清晰，易维护：看defineProps的定义就能直接了解组件所需的所有参数，每个参数的类型、默认值一目了然，无需额外查阅文档。
• IDE友好，开发高效：父组件传参时IDE会自动提示可用的Props，子组件内部使用props.xxx也有完整的类型补全，能大幅减少错误，提升开发速度。
• 精细化控制：每个Props可以单独设置必填项、默认值、自定义校验函数，能精准控制参数的合法性，降低运行时出错概率。

缺点 #

• Props过多时代码冗余：如果组件有10+个配置项，defineProps会变得冗长，父组件传参时也要写一堆属性，代码显得杂乱。
• 配置复用麻烦：多个相同子组件需要相同配置时，要么重复写所有Props，要么用v-bind解构，但都不如直接传一个配置对象便捷。

三、实际开发中的选择建议 #

1. 优先选择单独定义Props：绝大多数场景下，尤其是组件参数较少（≤5个）或参数之间无强关联时，单独定义Props是最优解，它的可读性和开发体验更好，后续维护成本低。
2. 复杂配置场景用单个对象Props：当组件有大量关联配置（比如图表组件的样式、数据、交互配置），或者配置需要频繁复用、扩展时，可以考虑用单个对象Props。如果用TypeScript，建议配合接口定义配置对象的类型，弥补类型提示的不足：

<script setup lang="ts">
import { computed } from 'vue'
import type { PropType } from 'vue'

interface SearchConfig {
  placeholder?: string
  backgroundColor?: string
  // 其他配置项
}

const props = defineProps({
  customSearchConfig: {
    type: Object as PropType<SearchConfig>,
    default: () => ({})
  }
})

const placeholder = computed(() => props.customSearchConfig.placeholder || '请输入')
</script>

3. 混合使用兼顾两者优势：也可以把常用的独立参数单独定义为Props，把一组关联的配置放在对象Props中，既保证关键参数的直观性，又能灵活处理复杂配置。

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