vue3，封装一个很长的表单，数据如何双向绑定？-灵析社区
横刀立马007我有一个很长的表单A，内容固定，如下。 A.vue ……………………………… A在项目内非常多的地方使用，A1,A2,A3的内部数据独立不用同步。 但是每个使用A的地方都会因为父组件的某些事件而改动A的内部参数。 const formData = ref({a,b,c,d...}) // await res = ajax() webSocket.onMessage(res=>{ formData.a = res.a }) 请问这种情况有无办法使formData双向绑定？ 现在我的实现方法是 ……………………………… const form = computed(() => { return props.modelValue }) 但是这样违背了单项数据流的原则。所以请问有更好的办法吗？
silennn子组件：
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 });
}
父组件：
import { ref } from 'vue';
const formData = ref({a: '', b: '', c: '', d: '', e: ''}); // 初始化数据
watchEffect(async () => {
const res = await ajax();
formData.a = res.a;
// ... 其他字段更新
});