Vue 3 v-model 怎么在组合式 API 中替代旧版 sync 修饰符

陌雪同学_7516

陌雪同学_7516

2026-10-21

198人浏览

原创

vue 3 中 .sync 修饰符已被移除,由 v-model 参数化机制替代:默认用 modelvalue + update:modelvalue,自定义则用 v-model:title 等,需在 defineprops 和 defineemits 中显式声明。

vue 3 v-model 怎么在组合式 api 中替代旧版 sync 修饰符

Vue 3 中 .sync 修饰符已被彻底移除,不是失效,而是被更清晰、更灵活的 v-model 参数化机制取代。在 <script setup></script> 中,你不能写 :title.sync,必须改用 v-model:title 或默认 v-model,并配合子组件显式声明 prop 和事件。

默认 v-model 绑定:用 modelValue + update:modelValue

这是最常用也最接近 Vue 2 .sync 逻辑的写法,适合单个状态控制(比如弹窗显隐):

  • 父组件直接写 <mydialog v-model="dialogVisible"></mydialog>
  • 子组件接收 modelValue prop,并声明 update:modelValue 事件
  • 触发更新时调用 emit('update:modelValue', newValue)

自定义 v-model 名称:替代多个 .sync

Vue 2 中常写 :title.sync="t" :content.sync="c",Vue 3 改为多个独立 v-model::

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习