vue3双向绑定语法糖

在Vue 3中，v-model指令不再是语法糖，而是被拆分为v-bind和v-on指令的组合使用。为了实现双向数据绑定，我们可以使用以下方式：

1. 使用v-bind指令将父组件中的值绑定到子组件的props上。在子组件中，通过修改props的值来改变父组件中相应的数据。

<!-- 父组件 -->
<Form :modelValue="formData" @update:modelValue="formData = $event"></Form>

<!-- 子组件 -->
<FormInput :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"></FormInput>

2. 使用自定义事件来实现双向数据绑定。在子组件中，通过$emit方法触发自定义事件，将新的值传递给父组件进行接收。

<!-- 父组件 -->
<Form v-model="formData"></Form>

<!-- 子组件 -->
<FormInput :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"></FormInput>

以上两种方式都可以实现双向数据绑定，可以根据实际情况选择适合的方式。