vue3 父子组件传参(2)

方法一：

使用计算属性（Computed Property）：
子组件可以使用计算属性来派生父组件传递的数据，并在表单中使用派生后的数据。这样，在表单中修改派生的数据不会直接影响父组件传递的原始数据。

<template>
  <div>
    <h3>子组件</h3>
    <form>
      <label for="child-name">姓名：</label>
      <input id="child-name" type="text" v-model="derivedData.name">
    </form>
  </div>
</template>

<script>
export default {
  props: {
    formData: Object
  },
  computed: {
    derivedData: {
      get() {
        return { ...this.formData };
      },
      set(value) {
        // 可以在这里对派生的数据进行额外的操作
        this.$emit('update:formData', value);
      }
    }
  }
};
</script>

通过使用计算属性 derivedData，我们在子组件中派生了 formData 的副本。当表单数据发生变化时，通过 set 方法更新派生的数据，并通过 $emit 发送更新后的数据给父组件。

方法二：

子组件可以通过自定义事件向父组件发送修改后的表单数据。

<template>
  <div>
    <h3>子组件</h3>
    <form>
      <label for="child-name">姓名：</label>
      <input id="child-name" type="text" v-model="childFormData.name">
    </form>
    <button @click="updateParentData">更新父级数据</button>
  </div>
</template>

<script>
export default {
  props: {
    formData: Object
  },
  data() {
    return {
      childFormData: { ...this.formData }
    };
  },
  methods: {
    updateParentData() {
      this.$emit('update-form-data', { ...this.childFormData });
    }
  }
};
</script>

在子组件中，我们将 formData 拷贝到 childFormData 中，并通过 v-model 绑定表单数据。当点击按钮时，通过 $emit 发送名为 update-form-data 的自定义事件，将修改后的数据传递给父组件。

这些是几种常见的处理父组件传递数据给子组件并在表单中使用的方法。具体选择哪种方法取决于你的需求和代码结构，以及是否需要双向绑定或对数据进行额外的操作。