Vue中父组件可向子组件传递复杂对象，需用对象语法声明props并设default函数，通过v-bind绑定响应式变量，子组件不得直接修改props，应通过emit通知父组件更新。

Vue 中父组件向子组件传递复杂对象（如嵌套对象、数组、带方法的对象等）完全可行，关键在于正确声明 props 类型、处理引用类型特性，并遵守单向数据流原则。

子组件必须用对象形式声明 props 并指定 type

不能只用字符串数组方式（如 props: ['config']），那样无法校验类型或设默认值。必须用对象语法明确声明为 Object 或 Array：

• 基础写法（仅类型）：config: { type: Object }
• 推荐写法（含默认值）：config: { type: Object, default: () => ({ theme: 'light', fontSize: 14 }) }
• 数组同理：items: { type: Array, default: () => [] }

⚠️ 注意：default 必须是函数，否则多个组件实例会共享同一引用，导致状态污染。

父组件用 v-bind 动态绑定对象变量

静态写法 <child config="{ theme: 'dark' }"></child> 不生效（会被当字符串解析），必须用 v-bind 或简写 : 绑定响应式变量：

立即学习“前端免费学习笔记（深入）”；

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 使用 ref：<child :config="userConfig"></child>，其中 userConfig = ref({ name: 'Alice', role: 'admin' })
• 使用 reactive：<child :config="profile"></child>，其中 profile = reactive({ avatar: '/img.png', tags: ['vue', 'ts'] })

这样子组件才能实时响应父组件中对象内部属性的变化（如 profile.avatar 更新）。

避免在子组件中直接修改传入的对象

Props 是只读的。如果子组件尝试 props.config.theme = 'dark'，Vue 会发出警告，且不会触发响应式更新：

• 如需局部修改，应基于 props 创建副本：const localConfig = { ...props.config }（浅拷贝）或 JSON.parse(JSON.stringify(props.config))（深拷贝）
• 如需通知父组件更新，应通过 $emit（选项式）或 defineEmits（组合式）抛出事件，由父组件决定是否修改源数据
• 对数组/对象内部属性的修改（如 props.items.push(x)）会直接影响父组件数据，属于隐式副作用，应严格避免

可选：添加校验提升健壮性

对复杂对象可加 validator 函数，检查结构是否符合预期：

• config: { type: Object, validator: (v) => v && typeof v.theme === 'string' && Array.isArray(v.permissions) }
• 配合 required: true 和 default，能覆盖多数边界场景

不复杂但容易忽略