v-model 双向绑定原理 及其在 Vue2 和 Vue3 中的区别

场景

总结一波 v-model 原理，先说结论：v-model 本身是 v-bind 和 v-on 结合在一起的语法糖，是用于原生标签（如input、textarea...）和自定义组件上的一个简化包装，在 vue2 中 props 接收的 value，事件为 $emit(事件)；在 vue3 中接收的 modelValue，事件为 $emit('update:modelValue')。原生的 v-model 会自动识别标签属性和事件。下面说实现。

步骤

以下代码实现全部是在工程化 vue3 中实现，但在 vue3 中也是支持 vue2 写法的，只不过会有坑

1. 实现一个基本的语法糖

// index.vue

2. 完结版-在子组件上实现双向绑定（vue3 && vue2）

// 子组件代码






// 父组件代码