前言

在 Vue 里写弹窗，你是不是也早就受够了下面这两个折磨前端已久的“拧巴”问题？

• 调用麻烦每次用弹窗都需要经历“声明 visible 状态 -> 模板预埋组件 -> 绑定显隐”的死板链路；想点击后动态弹出不同的弹窗一般是提前在模板里把可能的弹窗都写上，是“假”动态。话说回来，
• 复用困难弹窗组件与业务内容写在同一个组件里想复用业务内容很麻烦；一样，如果业务要求将弹窗换成抽屉，也很麻烦。 不过，

明明只想在点击后展示一个业务内容。为什么我们要写得这么沉重？

一、 少说废话：两组代码对比看清差距

调用方式对比

传统写法中。需要引入一堆具体的弹窗单体组件并在模板中预埋它们，同时为每一个弹窗维护一套显隐变量和回调逻辑。

❌ 传统声明式做法

新写法

业务弹窗对比

传统开发习惯将容器和内部表单逻辑焊死在同一个文件中。

❌ 传统高耦合单体弹窗