在 Vue 3 中实现“点击组件外部关闭”需在 onMounted 中监听 document 点击事件，通过 ref 获取根元素并用 contains() 判断 target 是否在其内，若否即 emit('update:show', false) 或 'close'；需处理 Teleport、下拉框等边界情况，并在 onUnmounted 中移除事件以防内存泄漏。

在 Vue 3 中，利用 emit 实现“点击组件外部关闭”逻辑，核心是监听全局点击事件，判断点击目标是否在当前组件内部，再通过 emit 通知父组件执行关闭。这不是单纯靠模板语法能完成的，需要结合生命周期、事件绑定与 DOM 判断。

监听 document 点击并过滤内部元素

在 onMounted 中为 document 添加点击监听器，在 onUnmounted 中移除，避免内存泄漏。关键在于：拿到点击的 event.target，检查它是否位于当前组件根元素（或其子元素）内。

• 使用 ref 绑定组件根元素（如
  ）
• 在点击回调中调用 rootRef.value?.contains(event.target)
• 如果不包含，说明点在外部，触发 emit('update:show', false) 或自定义事件如 emit('close')

配合 v-model 或显式 props 控制显隐

推荐用 v-model:show 双向绑定，这样子组件只需 emit('update:show', false)，父组件自动同步状态；若不用 v-model，就定义 props.show 和 emits: ['close']，然后 emit('close')，由父组件决定如何响应。

• 若用 v-model:show，需声明 props: { show: Boolean } 和 emits: ['update:show']
• 若用显式事件，建议命名语义化，如 close、hide，而非泛泛的 click-outside
• 注意：不要在根元素上直接写 @click.stop，否则会阻止冒泡但无法区分内外，应统一在 document 层处理

处理边界情况：表单控件、下拉菜单、Portal 内容

原生表单元素（、）、el-select 类下拉、或通过 Teleport 渲染到 body 的弹层，它们的 DOM 不在组件内部，rootRef.contains() 会返回 false，误判为“外部点击”。需额外适配：

• 对常见浮层类组件（如 Element Plus 的 el-popper），可监听其内部的 mousedown 并 stopPropagation
• 对 Teleport 内容，把相关容器也纳入判断范围，例如：rootRef.value?.contains(e.target) || popupRef.value?.contains(e.target)
• 对聚焦类交互（如点击 input 后弹出日期选择器），可在 focus 时临时禁用外部点击检测，blur 后恢复

封装成可复用的组合式函数（useClickOutside）

将上述逻辑抽离为 useClickOutside，接收 ref 元素和回调函数，内部自动处理生命周期与事件绑定，提升复用性：

• 函数签名示例：useClickOutside(rootRef, () => emit('close'))
• 内部用 onMounted/onUnmounted 管理事件，支持传入多个 refs 或 selector 字符串
• VueUse 已提供 onClickOutside，可直接引入：import { onClickOutside } from '@vueuse/core'，一行搞定

不复杂但容易忽略细节：DOM 判断必须在事件触发时实时进行，不能缓存节点状态；同时确保组件卸载时清理事件，避免跨组件副作用。