最常用且可靠的方式是通过 ref 获取组件实例后调用内置方法：element plus 用 show()/hide()，ant design vue 推荐 v-model:open 控制显隐，自定义组件则用响应式变量 + v-show 管理，并注意 ref 可用时机与 vue 版本差异。
直接通过 ref 获取组件实例后调用内置方法，是最常用也最可靠的方式。不同 UI 库的下拉组件暴露的 API 略有差异，但核心逻辑一致：拿到 ref → 触发 show / hide 方法或修改绑定状态。
Element Plus 的 el-dropdown
给 <el-dropdown></el-dropdown> 绑定 ref，例如 ref="dropRef"，然后在方法中调用：
-
展开：
this.$refs.dropRef.show()（Vue 2）或dropRef.value.show()（Vue 3 Composition API） -
收起：
this.$refs.dropRef.hide()或dropRef.value.hide() - 注意：必须确保 DOM 渲染完成后再调用，推荐在
nextTick或事件回调中执行
Ant Design Vue 的 Select / Dropdown
这类组件通常不直接暴露 show/hide 方法，而是通过控制绑定值或使用 open 属性：
- 用
v-model:open双向绑定布尔值（Vue 3），如v-model:open="isDropdownOpen" - 或用
:open+@update:open手动管理（Vue 2 / Vue 3 均可） - 若需强制触发，也可配合 ref 调用
focus()模拟点击打开，但不如属性控制稳定
自定义下拉组件（含浮层）
如果你封装了带弹出层的下拉菜单，关键在于让浮层的显示受控于一个响应式变量：
- 在模板中用
v-show="dropdownVisible"控制浮层显隐 - 通过 ref 获取触发元素或容器，结合
offsetHeight、getBoundingClientRect()动态计算浮层位置 - 点击遮罩层或失焦（
@blur或@click.outside）时设dropdownVisible = false
避坑提醒
常见问题不是“怎么写”，而是时机和作用域：
- ref 在
mounted后才可用，异步操作前务必加判空 - Vue 3 中 ref 是响应式对象，需取
.value；Vue 2 中this.$refs.xxx直接可用 - 滚动时自动关闭？检查是否误用了全局
getPopupContainer或未阻止事件冒泡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
