Vue 3 中 v-model 绑定抽屉需子组件接收 modelValue prop 并触发 update:modelValue 事件，父组件用 <Drawer v-model="isDrawerOpen"/> 实现双向绑定，严禁使用 value/visible 或 input/change 等旧式命名。
Vue 3 中 v-model 绑定抽屉组件（如 Drawer）的显隐状态，核心是把抽屉的打开/关闭状态（通常为 boolean）当作一个可双向控制的值来处理，而不是沿用 Vue 2 的 value/input 模式。抽屉组件本身需按 Vue 3 的 v-model 规范实现：接收 modelValue prop，并在显隐切换时触发 update:modelValue 事件。
抽屉组件内部必须满足的两个条件
子组件（Drawer.vue）需正确声明接口：
- 定义
modelValueprop，类型为Boolean，默认false - 使用
defineEmits(['update:modelValue'])声明可触发的更新事件 - 在控制显隐逻辑处（如点击遮罩、关闭按钮、ESC 键）调用
emit('update:modelValue', false)；打开逻辑则对应true
v-model 绑定写法与等价展开
父组件中这样使用即可：
<Drawer v-model="isDrawerOpen" />
立即学习“前端免费学习笔记（深入）”；
它等价于：
<Drawer :modelValue="isDrawerOpen" @update:modelValue="isDrawerOpen = $event" />
也就是说，抽屉是否显示，完全由 isDrawerOpen 控制；用户关闭抽屉时，组件自动把 false 回传给父组件，从而同步更新状态。
带自定义事件的完整示例（推荐）
实际开发中常需额外回调（如关闭后重置表单），建议同时暴露自定义事件：
父组件：
<Drawer v-model="isDrawerOpen" @confirm="handleSubmit" @cancel="handleCancel" />
子组件内：
- 用
defineEmits(['update:modelValue', 'confirm', 'cancel']) - 关闭按钮触发：
emit('update:modelValue', false); emit('cancel'); - 确认按钮触发：
emit('update:modelValue', false); emit('confirm');
避免常见错误
以下写法会导致 v-model 失效：
- props 写成
value或visible—— 必须叫modelValue（除非显式用v-model:xxx自定义） - emit 事件名写成
input或change—— 必须是update:modelValue - 在 setup 中直接修改 props（如
props.modelValue = false）—— props 是只读的，必须通过 emit 更新
