用 script setup 实现弹窗轻量化控制：通过 usemodal 组合函数封装单一 visible 状态，解构即用；子组件用 v-model:visible 接收，父组件免事件透传；多弹窗用独立 usemodal 或 reactive 管理；teleport 挂载至 body 且 v-show 控制显隐。
用 script setup 实现弹窗显示状态的轻量化控制，核心是“少声明、少传递、少耦合”——不依赖全局状态、不硬编码多个 ref 变量，靠组合式逻辑和合理作用域把显隐控制收得干净。
用 useModal 组合函数封装单一状态
把弹窗开关逻辑抽成可复用的 hook，避免每个组件都写 const visible = ref(false)：
- 创建
useModal()：内部只维护一个ref，返回visible、open、close三个基础能力 - 调用时直接解构，无需手动声明变量：
const { visible, open, close } = useModal() - 支持传参初始化（比如默认打开或带延迟关闭），但不强制——保持轻量，按需扩展
父组件中直接绑定 v-model，省去事件透传
弹窗组件用 v-model:visible 接收并响应，父组件不用监听 @update:visible 再手动赋值：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章