如何在 Vue 中通过点击菜单项关闭 Vuetify 2 的下拉菜单

在 vuetify 2 中，`` 默认不响应内部嵌套组件（如自定义 dialog）的点击事件来关闭菜单；需手动绑定 `v-model` 并在目标元素上显式设置 `@click=”showmenu = false”` 实现精准关闭。

vuetify 2 的 组件提供了 close-on-click 属性，但该属性仅对菜单直接子元素生效，且当内部嵌套了自定义组件（如 ）时，事件冒泡或委托可能被拦截，导致点击菜单项无法自动关闭。

最可靠、推荐的解决方案是：使用 v-model 显式控制菜单的打开/关闭状态，并在需要关闭的菜单项上添加 @click=”showMenu = false”。

✅ 正确实现方式（代码示例）

⚠️ 注意事项

• @click.stop 很重要：在 v-list-item-title 的 @click 上添加 .stop 修饰符，防止点击穿透到外层 v-list-item 导致 showMenu = false 被执行两次（尤其当 Dialog 内部也触发点击时）；
• 避免滥用 close-on-click：当菜单内含复杂交互组件时，建议关闭 :close-on-click（设为 false），完全交由 v-model 控制，提升可预测性；
• v-model 是关键：v-menu 的 v-model 绑定的是布尔值，代表菜单是否处于展开状态，这是 Vuetify 2 推荐的受控模式；
• 若需在 Dialog 关闭后恢复菜单打开状态（如取消操作），可在 Dialog 的回调中重置 showMenu = true，实现更精细的状态流管理。

通过显式状态管理 + 精准事件绑定，即可彻底解决嵌套组件内点击不关闭菜单的问题，代码清晰、行为可预期，符合 Vue 响应式开发最佳实践。