vue3，封装一个很长的表单，数据如何双向绑定？

Question

我有一个很长的表单A，内容固定，如下。

A.vue
<Form>
    <Select v-model='form.a'/>
    <Input v-model='form.b'/>
    <Select v-model='form.c'/>
    <Input v-model='form.d'/>
    <DatePicker v-model='form.e'/>
    ………………………………
</Form>

A在项目内非常多的地方使用，A1,A2,A3的内部数据独立不用同步。
但是每个使用A的地方都会因为父组件的某些事件而改动A的内部参数。

<template>
  <A v-model="formData"></A>
</template>

<script setup>
  const formData = ref({a,b,c,d...})
  
  // await res = ajax()
  
  webSocket.onMessage(res=>{
    formData.a = res.a
  })
  
</script>

请问这种情况有无办法使formData双向绑定？

现在我的实现方法是

<template>
  <Form>
    <Select v-model='form.a'/>
    <Input v-model='form.b'/>
    <Select v-model='form.c'/>
    <Input v-model='form.d'/>
    <DatePicker v-model='form.e'/>
    ………………………………
  </Form>
<template>

<script setup>
const form = computed(() => {
  return props.modelValue
})
<script>

但是这样违背了单项数据流的原则。所以请问有更好的办法吗？

Answer 1

子组件：

<template>
  <Form>
    <Select :model-value="form.a" @update:model-value="updateForm('a', $event)"/>
    <Input :model-value="form.b" @update:model-value="updateForm('b', $event)"/>
    <Select :model-value="form.c" @update:model-value="updateForm('c', $event)"/>
    <!-- 其他字段类似处理 -->
  </Form>
</template>

<script setup>
import { ref, toRefs } from 'vue';

const props = defineProps({
  modelValue: Object
});

const emit = defineEmits();

const form = ref({ ...props.modelValue }); // 初始化 form 数据


const updateForm = (key, value) => {
  form[key] = value;
  emit('update:modelValue', { ...form });
}
</script>

父组件：

<template>
  <A v-model="formData"></A>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({a: '', b: '', c: '', d: '', e: ''}); // 初始化数据

watchEffect(async () => {
  const res = await ajax();
  formData.a = res.a;
  // ... 其他字段更新
});
</script>

Answer 2

方案1:这个简单 可以直接使用这个就行usevmodel
方案2:
或者直接手动监听

<!-- 父组件 -->
<script setup>
import myComponent from "./components/MyComponent.vue";
import { ref, watch } from "vue";

const form = ref({
  name: "张三",
  age: 18,
  sex: "man",
});

watch(form, (newValue) => {
  console.log(newValue);
});
</script>

<template>
  <div>
    <my-component v-model="form"></my-component>
  </div>
</template>


<!-- 子组件 -->
<template>
  <div>
    <el-input v-model="form.name"></el-input>
    <el-input v-model="form.age"></el-input>
    <el-input v-model="form.sex"></el-input>
  </div>
</template>
<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(["update:modelValue"]);

const form = computed({
  get() {
    return new Proxy(props.modelValue, {
      get(target, key) {
        return Reflect.get(target, key);
      },
      set(target, key, value,receiver) {
        emit("update:modelValue", {
          ...target,
          [key]: value,
        });
        return true;
      },
    });
  },
  set(newValue) {
    emit("update:modelValue", newValue);
  },
});
</script>