vue 3 中 v-model 绑定抽屉需子组件接收 modelvalue prop 并触发 update:modelvalue 事件，父组件用 实现双向绑定，严禁使用 value/visible 或 input/change 等旧式命名。

Vue 3 中 v-model 绑定抽屉组件（如 Drawer）的显隐状态，核心是把抽屉的打开/关闭状态（通常为 boolean）当作一个可双向控制的值来处理，而不是沿用 Vue 2 的 value/input 模式。抽屉组件本身需按 Vue 3 的 v-model 规范实现：接收 modelValue prop，并在显隐切换时触发 update:modelValue 事件。

抽屉组件内部必须满足的两个条件

子组件（Drawer.vue）需正确声明接口：

• 定义 modelValue prop，类型为 Boolean，默认 false
• 使用 defineEmits(['update:modelValue']) 声明可触发的更新事件
• 在控制显隐逻辑处（如点击遮罩、关闭按钮、ESC 键）调用 emit('update:modelValue', false)；打开逻辑则对应 true

v-model 绑定写法与等价展开

父组件中这样使用即可：

它等价于：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

也就是说，抽屉是否显示，完全由 isDrawerOpen 控制；用户关闭抽屉时，组件自动把 false 回传给父组件，从而同步更新状态。

带自定义事件的完整示例（推荐）

实际开发中常需额外回调（如关闭后重置表单），建议同时暴露自定义事件：

父组件：

子组件内：

• 用 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 更新

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！