Vue3 中的 v-model 语法糖

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

语法糖版

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

绑定自定义属性

现在我们修改这个属性，将 modelValue 改为 aaa：

拆分 v-model:aaa

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

拆分后等价于：

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