Vue中接收复杂props需声明完整类型、工厂函数设默认值、避免直接修改并注意深层响应性限制：type须显式指定Object/Array/Function，default用箭头函数防共享，props只读应通过computed衍生状态，双向同步推荐defineModel或emits。
Vue 中通过 props 接收复杂结构配置项（比如嵌套对象、数组、含函数或响应式数据的配置）的关键在于：正确声明类型、合理设置默认值、避免直接修改、并注意深层响应性限制。
明确声明复杂类型的 props
不能只用数组形式或简写对象（如 config: Object），必须用完整对象形式，显式指定 type 并启用类型校验：
- 对嵌套对象或数组，
type写成Object或Array即可，但建议配合validator做结构校验 - 若使用 TypeScript +
<script setup lang="ts">，类型推导更安全，可直接写接口类型 - 函数类型需显式声明
Function，否则会被 Vue 忽略（非响应式，但可调用）
示例（运行时校验）：
const props = defineProps({
config: {
type: Object,
default: () => ({
title: '默认标题',
items: [],
onClick: () => {},
theme: { color: '#333', size: 'medium' }
}),
validator: (value) => {
return value && typeof value === 'object'
&& typeof value.onClick === 'function'
&& Array.isArray(value.items)
}
}
})
处理默认值中的引用类型
对象或数组的默认值必须用工厂函数返回，否则多个组件实例会共享同一份内存：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
default: { items: [] }—— 所有实例共用该数组 - ✅ 正确写法：
default: () => ({ items: [] })或default: () => ({ ... }) - 深层嵌套对象也一样，每个层级都应独立创建，避免意外响应性污染
访问与使用配置项的注意事项
props 是只读的，尤其对复杂结构：
- 不要直接赋值修改
props.config.items = [...]，会触发警告 - 如需衍生状态，用
computed包装：const normalizedItems = computed(() => props.config.items?.map(...)) - 函数类配置（如
onSubmit）可直接调用，但注意 this 绑定 —— 推荐在父组件中已绑定好，或用箭头函数传递 - 若配置含 ref / reactive 数据，子组件无法自动追踪其内部变化（props 本身是浅响应），需手动监听或解构使用
配合 defineModel 或 emits 实现双向配置同步（可选进阶）
当配置项需要子组件反馈更新（如表单配置实时回传），不推荐直接改 props，而应：
- 父组件用
v-model:config="formConfig"传入 - 子组件用
defineModel('config')声明双向绑定（Vue 3.4+） - 或传统方式：props 传配置 + emits 触发
update:config事件
这样既保持单向数据流原则，又支持配置的受控更新。
