Vue 3 中 .sync 修饰符已被移除,由 v-model:propName 机制替代;默认 v-model 绑定 modelValue prop 和 update:modelValue 事件;支持多个独立 v-model;Composition API 中需显式声明 defineEmits。

Vue 3 中 .sync 修饰符已被正式移除,它不是“失效”或“bug”,而是被更统一、更灵活的 v-model 参数化机制取代。核心逻辑没变——仍是“prop 下传 + update:xxx 事件上抛”,只是写法更清晰、能力更强。
v-model:propName 是 .sync 的直接替代
原来 Vue 2 中的 :title.sync="pageTitle",在 Vue 3 中应改写为:
- 子组件需声明
showprop,并在需要更新时触发update:show事件 - 父组件无需额外监听事件,
v-model:show自动完成绑定与响应
默认 v-model 仍可用,但规则变了
如果子组件只用一个双向绑定(比如最常见的开关控制),可继续用简写 v-model,但注意:
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
- 默认绑定的 prop 名是
modelValue(不再是value) - 默认触发的事件是
update:modelValue - 所以
等价于
多个双向绑定?v-model 支持同时定义多个
一个组件可以同时响应多个独立的 v-model,彻底替代过去靠多个 .sync 实现的场景:
- 子组件只需接收
keyword和filter两个 prop,并分别触发update:keyword和update:filter - 无需额外 props 或事件名约定,语义明确,扩展性强
setup 语法中要注意 emit 声明
使用 Composition API 时,defineEmits 必须显式列出要触发的 update 事件,否则会警告或失效:
const emit = defineEmits(['update:show', 'update:title'])- 触发时写
emit('update:show', false),不能漏掉update:前缀 - props 接收也要对应写
show: { type: Boolean },保持名称一致
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










