vue .sync 和 v-model 区别

在Vue.js中,.sync修饰符和v-model都用于实现双向数据绑定,但它们在应用场景和实现方式上有显著区别:

1. 核心用途

  • v-model
    主要用于表单元素自定义组件单一数据双向绑定 。默认绑定value属性和input事件(可配置为其他属性和事件)。
  • .sync
    用于多个props的双向绑定 。通过触发update:propName事件更新父组件的值,适合需要同步多个props的场景。

2. 语法实现

  • v-model

    语法糖,等价于绑定value属性和监听input事件:

    vue 复制代码
    <child :value="data" @input="data = $event" />

    自定义组件可通过model选项修改默认行为:

    javascript 复制代码
    model: { prop: 'checked', event: 'change' }
  • .sync

    语法糖,等价于绑定属性和监听update:propName事件:

    vue 复制代码
    <child :title="pageTitle" @update:title="pageTitle = $event" />

3. 数量限制

  • v-model
    在Vue 2中,一个组件只能有一个v-model

  • .sync
    支持多个props的双向绑定 ,例如:

    vue 复制代码
    <child :name.sync="userName" :age.sync="userAge" />

4. Vue 3中的变化

  • v-model
    支持参数化绑定 ,替代.sync的功能,例如:

    vue 复制代码
    <child v-model:name="userName" v-model:age="userAge" />

    Vue 3中不再推荐使用.sync,转而用带参数的v-model

5. 使用场景

  • v-model
    适用于核心数据绑定(如输入框、开关状态等)。
  • .sync
    适用于需要同步多个props的场景(如弹窗组件的多个配置参数)。

示例对比

  • v-model(Vue 2)

    父组件:

    vue 复制代码
    <CustomInput v-model="message" />

    子组件通过value接收值,触发input事件更新:

    javascript 复制代码
    this.$emit('input', newValue);
  • .sync(Vue 2)

    父组件:

    vue 复制代码
    <Child :title.sync="pageTitle" />

    子组件触发update:title事件:

    javascript 复制代码
    this.$emit('update:title', newTitle);

总结

特性 v-model .sync
绑定数量 单个 多个
默认绑定 valueinput事件 propupdate:prop事件
Vue 2场景 核心数据绑定 多props同步
Vue 3替代方案 支持参数化(替代.sync 废弃,改用带参数的v-model

在Vue 2中,根据需求选择:单一核心数据用v-model,多props同步用.sync;在Vue 3中,统一使用参数化的v-model

相关推荐
每天开心几秒前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt7 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅8 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala233325 分钟前
ESLint 提交前校验技术方案
前端
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了1 小时前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记