在 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绑定组件根元素（如<div ref="rootRef">） <li>在点击回调中调用 <code>rootRef.value?.contains(event.target) - 如果不包含，说明点在外部，触发
emit('update:show', false)或自定义事件如emit('close') - 若用
v-model:show，需声明props: { show: Boolean }和emits: ['update:show'] - 若用显式事件，建议命名语义化，如
close、hide，而非泛泛的click-outside - 注意：不要在根元素上直接写
@click.stop，否则会阻止冒泡但无法区分内外，应统一在 document 层处理 - 对常见浮层类组件（如 Element Plus 的
el-popper），可监听其内部的mousedown并stopPropagation - 对
Teleport内容，把相关容器也纳入判断范围，例如：rootRef.value?.contains(e.target) || popupRef.value?.contains(e.target) - 对聚焦类交互（如点击 input 后弹出日期选择器），可在
focus时临时禁用外部点击检测，blur 后恢复 - 函数签名示例：
useClickOutside(rootRef, () => emit('close')) - 内部用
onMounted/onUnmounted管理事件，支持传入多个 refs 或 selector 字符串 - VueUse 已提供
onClickOutside，可直接引入：import { onClickOutside } from '@vueuse/core'，一行搞定
配合 v-model 或显式 props 控制显隐
推荐用 v-model:show 双向绑定，这样子组件只需 emit('update:show', false)，父组件自动同步状态；若不用 v-model，就定义 props.show 和 emits: ['close']，然后 emit('close')，由父组件决定如何响应。
处理边界情况：表单控件、下拉菜单、Portal 内容
原生表单元素（<input>、<select></select>）、el-select 类下拉、或通过 Teleport 渲染到 body 的弹层，它们的 DOM 不在组件内部，rootRef.contains() 会返回 false，误判为“外部点击”。需额外适配：
封装成可复用的组合式函数（useClickOutside）
将上述逻辑抽离为 useClickOutside，接收 ref 元素和回调函数，内部自动处理生命周期与事件绑定，提升复用性：
不复杂但容易忽略细节：DOM 判断必须在事件触发时实时进行，不能缓存节点状态；同时确保组件卸载时清理事件，避免跨组件副作用。
