双向绑定多个表单控件值

本节目标：理解“双向绑定多个表单控件值”的核心思路，并能把它用于实际开发或面试表达。双向绑定一般应用在：

值保存在父组件，而触发值变化的事件发生在子组件；
vue中使用属性和父组件捕获子组件事件来实现，双向绑定是其中方便的一种；
react使用属性值和值为回调函数的属性来实现，在子组件的事件中，调用父组件传递的回调函数，从而改变父组件中保存的值；

一、通过v-model来给组件添加双向绑定；二、对于v-model，认为传入的属性值为modelValue，组件内部的会产生update:modelValue事件，这个事件会更新modelValue的值；三、我们在组件的内部，将传入的modelValue进行响应式解析，并将值传入到具体的表单控件：

const props = defineProps<Props>();
const emits = defineEmits(["update:modelValue"]);
const { modelValue } = toRefs(props);
const number0 = toRef(modelValue.value, 0);
const number1 = toRef(modelValue.value, 1);
const number2 = toRef(modelValue.value, 2);
const number3 = toRef(modelValue.value, 3);

模板文件：

<template>

 <div class="long-number-wrap">

 <div>

率定公式：

</div>

 <div class="field-wrap">

 <VanField v-model="number0" type="number" border :maxlength="12" />

 <div>x

+</div>

 <VanField v-model="number1" type="number" border :maxlength="12" />

 <div>x

+</div>

 <VanField v-model="number2" type="number" border :maxlength="12" />

 <div>x+</div>

 <VanField v-model="number3" type="number" border :maxlength="12" />

 <div></div>

 </div>

 </div>
</template>

此时，已经完成了单向绑定，现在，我们要在任何一个表单控件更新其v-model值时，也就是触发其change事件时，触发一个update:modelValue事件，将传入的modelValue值进行更新，从而完成双向绑定；四、我们采用的方法是watch这四个控件的v-model值，当任意一个值发生变化时，触发update:modelValue方法，将新值传到父级，而父级又通过modelValue变量回显我们表单控件的值：

watch([number0, number1, number2, number3], (newValue) => {

 emits("update:modelValue", newValue);
});

完成双向绑定；

此外，还可以在组件上使用多个v-mode:xxx来实现多个表单控件的双向绑定，只是要定义的变量较多，可以视实际需求选用；

双向绑定多个表单控件值 ​

双向绑定多个表单控件值