vue2组件对象传参

Liu.7742025-05-24 12:57

Vue2组件对象传参实现

在Vue2中传递对象参数给组件时，可通过以下步骤实现：

1. 子组件定义props

使用对象形式进行类型验证：

javascript 复制代码

// 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. 父组件传递对象

通过属性绑定的方式传递：

html 复制代码

<!-- 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通知父组件修改）
深度监听：

javascript 复制代码

watch: {
  userInfo: {
    handler(newVal) {
      console.log('用户信息变更', newVal)
    },
    deep: true
  }
}

4. 完整示例流程

html 复制代码

<!-- 子组件模板 -->
<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>

html 复制代码

<!-- 父组件使用 -->
<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. 特殊场景处理

动态属性添加需使用：

javascript 复制代码

this.$set(this.userInfo, 'newProperty', value)

保持响应性推荐使用对象替换而非直接修改：

javascript 复制代码

// 推荐
this.userInfo = { ...this.userInfo, age: 30 }

// 不推荐
this.userInfo.age = 30

该实现方式适用于需要传递复杂数据结构的场景，能有效保持组件间的数据同步和响应性。