Emit 实现自定义 Select 的核心是通过 Vue 事件机制解耦选择逻辑、状态更新与 DOM 交互：父组件控制 v-model 值，子组件负责展示、聚焦、键盘导航与搜索过滤，并统一通过 $emit('update:modelValue') 同步选中项，同时用 $emit('change') 传递业务语义事件。
用 Emit 实现自定义 Select 下拉框，核心不是“造轮子”，而是通过 Vue 的事件机制把选择逻辑、状态更新和 DOM 交互解耦。关键在于：父组件控制值（v-model），子组件负责展示、聚焦、键盘导航、搜索过滤，并通过 $emit('update:modelValue') 同步选中项；同时用 $emit('change') 传递业务语义事件。
1. 基础结构：接收 props，触发更新
组件需支持 v-model，即接收 modelValue（Vue 3）或 value（Vue 2），并 emit update:modelValue。不直接操作 props，所有变更都走 emit：
- 定义 props：modelValue（必填）、options（数组，含 label/value）、disabled、placeholder
- 用 v-model 绑定内部 input 或隐藏域，但真实选中态由 modelValue 驱动
- 点击选项时：this.$emit('update:modelValue', option.value)（Vue 2）或 this.$emit('update:modelValue', option.value)（Vue 3 写法一致）
- 清空时 emit update:modelValue 传 null 或 ''，取决于业务约定
2. 键盘交互：用 emit 触发行为，而非直接修改 state
方向键切换高亮、Enter 确认、Escape 关闭下拉——这些动作本身不改变 modelValue，而是通过 emit 通知外部决定是否响应：
- 监听 keydown，在 onKeydown 中判断 keyCode，emit 如 'keydown:up'、'keydown:enter'
- 不内置“高亮索引”逻辑，除非是纯内部 UI 状态（如 highlightIndex）。若需外部控制（比如联动滚动），可 emit 'highlight-change' 携带 index
- Enter 确认时，只在有高亮项且下拉展开时 emit update:modelValue，避免误触
3. 搜索与过滤：emit 请求，不自行请求数据
带搜索的 Select，输入时不应自己调 API，而应 emit 查询事件，由父组件决定是否发起请求、如何缓存、是否防抖：
- input 事件中：this.$emit('search', keyword)
- 父组件监听 search，执行防抖 + API 调用，拿到新 options 后更新传入的 options prop
- 组件内部只做本地过滤（当 options 已全量加载）：用 computed 过滤，不 emit，也不改 props
- 避免在子组件里写 axios 或 useRequest，保持职责单一
4. 完整事件清单建议（按用途归类）
合理设计 emit 事件名，让父组件能精准响应，而不是堆砌 onXXX：
- 状态同步类：update:modelValue（必须）、update:open（如支持受控展开）
- 用户行为类：change（值提交后）、focus、blur、clear
- 交互反馈类：open、close、search（带 keyword）、keydown:up/down/enter/esc
- 避免 emit 'select' 这种模糊命名，它和 change、update:modelValue 语义重叠，易导致重复处理
封装的本质是暴露可控的输入（props）和明确的输出（emit），而不是把所有逻辑塞进组件内部。Select 的交互看似简单，但焦点管理、键盘流、搜索时机、异步加载、无障碍支持，每一处都依赖 emit 做好边界划分。写的时候多问一句：“这个动作该由谁决策？”答案通常是——父组件，而不是 Select 自己。
