Vue3 中的 v-model 语法糖

本章节我们用 “从特殊到一般” 的推演法，分析 Vue3 中 v-model 语法糖的基本原理，以便我们更好地理解和应用它，具体拆分过程如下：

语法糖版

其实 Vue3 中，v-model="counter" 中，默认绑定的属性是 modelValue。

绑定自定义属性 :aaa

现在我们修改这个属性，将 modelValue 改为 aaa，功能依然正常。

拆分 v-model:aaa

现在我们修改父组件中调用子组件的地方，对于带参数的 v-model:aaa

拆分后等价于：

• prop 绑定：:xxx="父组件数据"
• 事件监听：@update:xxx="父组件数据 = $event"

替换自定义方法 @update:aaa

现在我们修改 子传父时，在子组件中绑定的事件回调名称，把默认的 @update:aaa，改为别的名称，依然生效：