Vue 3 中使用 v-model 实现父子组件间 show 状态的双向绑定

在 vue 3 组合式 api 中，子组件通过 `update:xxx` 事件通知父组件更新 prop 值时，若父组件未启用响应式双向绑定（如仅用 `:show=”value”`），状态变更将无法同步——需改用 `v-model:show` 语法实现自动监听与赋值。

问题根源在于：你当前在父组件中使用的是单向绑定 ，它只将 abcdef 的当前值传递给子组件，但不会自动监听子组件发出的 update:show 事件并更新 abcdef 的值。因此，尽管子组件正确触发了 emit(‘update:show’, false)，父组件的 abcdef 仍保持 true，导致 Dialog 持续显示。

✅ 正确做法是使用 vue 3 的 v-model 语法糖（支持自定义修饰符）：

该写法等价于：

同时，子组件逻辑已基本正确，但可进一步优化以提升健壮性：

立即学习“前端免费学习笔记（深入）”；

⚠️ 注意事项：

• v-model:xxx 要求子组件必须声明 xxx prop 并触发 update:xxx 事件，二者名称须严格匹配；
• 若未使用 v-model:xxx，而坚持手动绑定，必须显式书写 @update:xxx 监听器完成赋值；
• dShow 作为本地响应式状态，仅用于控制 Dialog 的 :visible 属性，不参与跨组件状态管理——所有状态源应唯一（即以父组件 abcdef 为单一数据源）。

总结：Vue 3 的 v-model 不再局限于表单元素，而是通用的双向绑定机制。对任意 prop 启用 v-model:propName，即可自动建立“传入值 + 监听更新”的完整闭环，这是组合式 API 中实现响应式通信的标准实践。