Vue3中 v-model的用法

在Vue3.0中，将移除v-bind的.sync修饰符使用带参数的v-model替代。

<MyComponent v-bind:title.sync="title" />

替代语法为：

<MyComponent v-model:title="title">

动机

在Vue2.x中，v-bind.sync可能会造成一些困惑，很多人认为它和v-bind一样，但实际上并不是这样的。

认为v-bind:title.sync="title"像一个普通的属性绑定带有一点额外的功能是错误的理解，因为双向绑定和单向绑定本质上是不同的，sync修饰符的工作原理实际上和v-model是相似的，他是一个创建双向绑定的语法糖。主要区别在于它可以在同一个组件上进行多个双向绑定，而不是仅限于一个。

应用示例

在元素上使用

<!-- 简写 -->
<input v-model="xxx">

<!-- 完整语法 -->
<input :model-value="xxx" @update:model-value="newValue => { xxx = newValue }">

<input v-model:aaa="xxx">
<!-- 无效语法 编译报错 -->

在组件上使用

<!-- 简写 -->
<MyComponet v-model="xxx">

<!-- 完整语法 -->
<MyComponent :model-value="xxx" @update:model-value="newValue => { xxx = newValue }">

<!-- 简写 -->
<MyComponent v-model:aaa="xxx">

<!-- 完整语法 -->
<MyComponent :aaa="xxx" @update:aaa="newValue => { xxx = newValue }">