vue3中通过props传值给子组件并将props赋值给reactive用于页面回显，但是导致页面输入框无法修改回显的数据-解决方案

vue3中通过props传值给子组件并将props赋值给reactive用于页面回显，但是导致页面输入框无法修改回显的数据

 在Vue3中，可以使用toRefs函数将传递来的对象转换成响应式对象的属性集合，而不是整个对象本身。如果需要将传递来的对象转换成普通对象，可以使用ES6对象的解构语法，将对象的属性分离出来：

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    // 使用toRefs将传递来的对象转换成响应式对象
    const user = toRefs(props.user);

    // 解构出对象的属性，将其转换为普通对象
    const { id, name, age, gender } = user;

    return {
      id,
      name,
      age,
      gender
    };
  }
};
</script>

可以使用解构赋值语法和可选链语法来优化这段代码，如下所示：

watch(() => props.detail, (detail) => {
  if (!detail || !Object.keys(detail).length) return;
  const {
    initAmt,
    traceType,
    traceValue,
    marginMode,
    spRation,
    slRation,
    slAmt,
    symbols,
    settings
  } = detail || {};
  Object.assign(form, {
    initAmt,
    traceType,
    traceValue,
    marginMode,
    spRation,
    slRation,
    slAmt,
    symbols,
    settings
  });
}, { deep: true, immediate: true });

这样可以避免代码中的重复代码和不必要的判断，使代码更加简洁和易读。

通过这种方式，将数据赋值给子组件，页面就不会受影响不能输入了