在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 }">
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署
· 葡萄城 AI 搜索升级:DeepSeek 加持,客户体验更智能