在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 }">