vue3父子组件传参 子组件修改父组件传过来的参数对象里的某个属性

Vue3中，父子组件间的通信可以通过props（属性传递）来实现。如果你想要子组件修改父组件传入的对象属性，通常有两种做法：

1. **深拷贝**：如果父组件传递的是一个引用类型（如对象或数组），你需要确保在子组件内部操作的是副本而不是原数据。可以使用`Vue.extend`创建一个深度克隆的新的对象实例。

// 父组件
props: {
  obj: {
    type: Object,
    default: () => ({ prop1: 'default value' }),
    // 使用deepClone防止直接修改影响到父组件
    handler(val) {
      this.obj = JSON.parse(JSON.stringify(val));
    }
  }
}

// 子组件
methods: {
  updateProp() {
    this.$emit('update:obj', { ...this.$parent.obj, prop1: 'new value' });
  }
}

2. **事件发射**：通过$emit触发自定义事件，并在父组件监听这个事件，更新父组件的数据。

// 子组件
methods: {
  updateProp() {
    this.$emit('updateObj', { prop1: 'new value' });
  }
}

// 父组件
<template>
  <child-component @updateObj="handleUpdate"></child-component>
</template>

<script>
export default {
  methods: {
    handleUpdate(newObj) {
      this.obj = newObj;
    }
  }
};
</script>

无论哪种方式，都要确保在子组件改变属性时通知父组件，以便父组件能够更新视图。