Vue 3 Emits 怎么替代 Vue 2 的 sync 修饰符实现多数据同步

大浩君_6999

大浩君_6999

2026-10-22

610人浏览

原创

vue 3 中 .sync 修饰符已被移除,由 v-model:propname 机制替代;需子组件显式声明 defineemits 并触发 update:propname 事件,支持多个独立 v-model 绑定。

vue 3 emits 怎么替代 vue 2 的 sync 修饰符实现多数据同步

Vue 3 中 .sync 修饰符已被移除,不再支持。它不是“失效”,而是被更清晰、更可扩展的 v-model:xxx 机制完全替代。核心思路是:每个需要双向同步的 prop,都配一个独立的 v-model:propName,子组件通过 update:propName 事件通知父组件更新。

用 v-model:xxx 替代 :prop.sync

原来 Vue 2 的写法:

在 Vue 3 中等价写法是:

这会自动编译为:

show = val" @update:title="val => dialogTitle = val" />

子组件只需按约定 emit 对应事件即可完成同步。

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万人学习