v-model 绑定通知提示框显隐状态需子组件声明 modelValue prop 并通过 emit('update:modelValue', false) 通知父组件更新，父组件用 实现双向同步，支持多 v-model 参数化绑定消息内容等。

v-model 绑定通知提示框（如自定义 Toast 或 Alert 组件）的显隐状态，核心是把提示框的显示控制权交给一个布尔值 prop，并通过 update:xxx 事件让子组件能“反向通知”父组件更新该值。Vue 3 中 v-model 不再默认绑定 value，而是默认绑定 modelValue，所以通知框组件需按此约定设计。

子组件：接收 modelValue 并触发更新

通知提示框（比如 Notify.vue）需声明 modelValue prop，并在需要关闭时调用 emit('update:modelValue', false)：

• props 定义：modelValue: { type: Boolean, default: false }
• 使用 defineEmits(['update:modelValue']) 声明可触发的事件
• 在自动关闭、点击关闭按钮、ESC 键等时机执行：emit('update:modelValue', false)
• 模板中用 v-if="props.modelValue" 控制整个提示区域是否渲染（或用 v-show 控制显隐）

父组件：用 v-model 直接绑定显隐变量

无需手动监听事件或写额外逻辑，直接用 v-model 即可双向同步：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• —— 等价于 :model-value="showNotify" @update:model-value="showNotify = $event"
• showNotify 是响应式变量（ref(false) 或 reactive({ showNotify: false })）
• 父组件可随时通过修改 showNotify 打开/关闭提示框，子组件关闭时也会自动更新它

进阶：支持多个 v-model（如绑定消息内容）

若提示框还需同步标题、文本、类型等，可用 v-model 参数化：

• 父组件：
• 子组件 props 增加：message: String、type: String
• 对应 emit 事件为：update:message、update:type
• 这样一次打开就能传入完整配置，关闭时只触发 update:modelValue，不影响其他字段

注意点：避免常见失效情况

如果绑定后关闭无效，大概率是以下原因：

• 子组件没正确声明 modelValue prop，或类型不是 Boolean
• 忘记调用 defineEmits(['update:modelValue'])，导致 emit 不生效
• 父组件用了 :model-value="xxx" 单向绑定，而非 v-model（此时子组件 emit 不会更新父数据）
• 提示框内部用了 v-show 但未监听 modelValue 变化做响应处理（建议配合 watch 或直接用 v-if）

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