Vue中用ref控制模态框显隐，本质是父组件通过ref获取子组件实例并调用其暴露的show/hide等方法；子组件需用defineExpose显式导出响应式变量或方法，且避免与v-model混用。
在 Vue 中，用 ref 控制模态框（弹窗）的显示与隐藏，本质是**通过父组件拿到子组件实例，调用其暴露的方法或修改其响应式状态**。这种方式适合需要主动触发、逻辑集中、或不希望把弹窗状态“上提”到父组件管理的场景。
子组件必须显式暴露控制能力
Vue 3 的 setup 语法中，子组件默认不对外暴露任何内容。要让父组件能调用它的方法或访问变量，必须使用 defineExpose 显式导出：
- 定义一个
ref控制显隐，比如const visible = ref(false) - 提供打开、关闭、切换等方法，例如
show() { visible.value = true } - 在
defineExpose中把方法或visible暴露出去
父组件用 ref 获取实例并调用
父组件中声明一个 ref 变量（如 const modalRef = ref()），在模板中绑定到子组件上（<EditModal ref="modalRef" />）。之后就能安全调用子组件暴露的方法：
-
modalRef.value?.show()—— 打开弹窗 -
modalRef.value?.hide()—— 关闭弹窗 -
modalRef.value?.setVisible(true)—— 直接设状态（如果暴露了visible）
注意 v-model 绑定和 ref 控制不要混用
如果子组件同时支持 v-model:visible 和 ref 调用，容易造成状态冲突。建议明确分工：
立即学习“前端免费学习笔记（深入）”；
- 只用
ref控制：子组件内部完全管理visible，不接收外部 props 控制 - 或者统一用
v-model+ 父组件状态：更符合 Vue 响应式设计原则，也便于联动刷新、禁用等逻辑
实际写法示例（子组件）
子组件 EditModal.vue：
import { ref } from 'vue'
const visible = ref(false)
const show = () => { visible.value = true }
const hide = () => { visible.value = false }
const toggle = () => { visible.value = !visible.value }
defineExpose({ show, hide, toggle, visible })
</script>
