Vue 3 嵌套组件中 v-model 断层本质是违反单向数据流，因直接修改 prop；正确做法是用计算属性代理或 Vue 3.4+ 的 defineModel 编译宏实现合规双向绑定。
Vue 3 中多个子组件嵌套时，v-model 容易出现“断层”，本质是父传子、子再传孙的过程中，违反了单向数据流原则——比如直接把父级 prop 绑定到深层子组件的 v-model 上，导致 ESLint 报错 Unexpected mutation of "xxx" prop。这不是 Vue 的 bug，而是设计使然：v-model 是语法糖，它隐含地尝试修改 prop，而 prop 只能由父组件控制。
明确 v-model 的真实行为
v-model 不是魔法，它只是自动展开为：
– 绑定一个 prop（Vue 3 默认是 modelValue）
– 监听一个事件（Vue 3 默认是 update:modelValue）
所以当你写 <child v-model="parentData"></child>，等价于：<child :modelvalue="parentData"></child>
关键点在于：子组件内部不能直接把接收到的 modelValue 再当作 v-model 的目标去用，否则就等于在改 prop。
嵌套层级中正确传递 v-model 的三步法
假设结构是：Parent → Wrapper（封装层） → NativeInput（原生 input 或第三方组件如 Naive UI 的 NInput）
-
Wrapper 层不直接绑定 props：不要写
<n-input v-model="modelValue"></n-input>，这会触发 ESLint 错误 -
用计算属性做中间代理：定义一个
computed，getter 返回props.modelValue，setter 触发emit('update:modelValue', value) -
把计算属性传给最内层组件：用
<n-input v-model="proxyValue"></n-input>，此时proxyValue是可读写的响应式引用，不触碰原始 prop
支持多个 v-model 的场景（如 show + title）
Vue 3 允许同时绑定多个 v-model，例如：<my-dialog v-model:show="isOpen" v-model:title="dialogTitle"></my-dialog>
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
在封装组件中，你需要：
立即学习“前端免费学习笔记（深入）”；
- 用
defineModel('show')和defineModel('title')分别声明（Vue 3.4+） - 或手动声明多个 prop + emits（兼容旧版）：
const props = defineProps(['show', 'title'])const emit = defineEmits(['update:show', 'update:title']) - 对每个模型都配一个计算属性代理，避免直接透传
defineModel 是更简洁的解法（推荐 Vue 3.4+ 项目）
如果你使用的是 Vue 3.4 或更高版本，defineModel 编译宏能一键解决嵌套断层问题：
- 一行代码替代 props + emits + computed 三件套：
const model = defineModel()→ 默认对应modelValue - 支持命名模型：
const show = defineModel('show')，const title = defineModel('title') - 在模板中可直接使用：
<n-input v-model="model"></n-input>，不再需要中间计算属性
它不是绕过规则，而是编译器帮你自动做了代理逻辑，既合规又省事。
