vue2组件对象传参
Vue2组件对象传参实现
在Vue2中传递对象参数给组件时，可通过以下步骤实现：
1. 子组件定义props
使用对象形式进行类型验证：
// ChildComponent.vue
export default {props: {userInfo: {type: Object,required: true,default: () => ({name: '访客',age: 0,permissions: ['read']}),validator: (value) => {return 'name' in value && 'age' in value}}}
}
2. 父组件传递对象
通过属性绑定的方式传递：
<!-- ParentComponent.vue -->
<template><child-component :user-info="currentUser"></child-component>
</template><script>
export default {data() {return {currentUser: {name: '张三',age: 28,permissions: ['read', 'write']}}}
}
</script>
3. 使用注意事项
- 响应式更新：父组件修改对象属性会自动同步到子组件
- 引用传递：修改子组件接收的对象属性会影响父组件数据（需用
$emit通知父组件修改） - 深度监听：
watch: {userInfo: {handler(newVal) {console.log('用户信息变更', newVal)},deep: true}
}
4. 完整示例流程
<!-- 子组件模板 -->
<template><div class="user-card"><h3>{{ userInfo.name }}</h3><p>年龄：{{ userInfo.age }}</p><button @click="handleBirthday">过生日</button></div>
</template><script>
export default {methods: {handleBirthday() {// 正确方式：通过事件通知父组件修改this.$emit('update-age', this.userInfo.age + 1)}}
}
</script>
<!-- 父组件使用 -->
<template><div><child-component :user-info="currentUser"@update-age="handleAgeUpdate"></div>
</template><script>
export default {methods: {handleAgeUpdate(newAge) {this.currentUser = {...this.currentUser,age: newAge}}}
}
</script>
5. 特殊场景处理
动态属性添加需使用：
this.$set(this.userInfo, 'newProperty', value)
保持响应性推荐使用对象替换而非直接修改：
// 推荐
this.userInfo = { ...this.userInfo, age: 30 }// 不推荐
this.userInfo.age = 30
该实现方式适用于需要传递复杂数据结构的场景，能有效保持组件间的数据同步和响应性。