Vue 项目中，每个页面都有 2~3 个对话框，应该如何整理存放和复用？

[giter]

前端基于 Vue3 + Element Plus + Vite + TypeScript 。当前，每个页面都有类似于：详情对话框、编辑对话框和各种嵌套对话框等，该复用的已经复用过了，剩下的对话框都含有各自的特色内容，不宜复用，强行复用可能会导致单文件代码量过多不利于后期维护。

目前的疑问：我现在的做法是拆分每个 el-dialog 为单文件组件，存放到 components 文件夹下（可能有违 components 这个文件夹的定义，我的理解是 components 用来存放一些复用性很高的组件，而不是这种零散的对话框单组件文件）所以就导致我现在的项目结构很多 xxxDialog.vue 文件，既不知道如何归类存放，也不知道该怎么高效复用。

[giter]

@trokix 看起来很高级，第一次听说，谢谢，我去了解一下

[QuincyX]

函数式组件不能 jnject ，不方便

我的最佳实践：
- 每个页面都放在一个文件夹中而不是单文件组件
- 每个文件夹下都放一个 __com__ 用来放页面模块
- index.vue 只是用来把多个模块拼装在一起
- 数据和逻辑用 provide/inject 共享复用
- 也可以独立一个 js 文件存放（ hooks 方式）

[QuincyX]

pageA
└─ index.vue
└─ __com__
└─────── moduleA.vue
└─────── moduleB.vue
└─────── dialogA.vue
└─────── drawerA.vue

[wuzhanggui]

我的做法，直接上代码

https://github.com/wurencaideli/dumogu-admin/blob/master/web/src/views/system/menu/components/EditDataDialog.vue

[AlphaTr]

我们项目的做法，组件分为三级
1. /src/components/: 通用组件，具有跨项目的共性，更多是对通用组件库的补充；例如图片裁切组件，判断依据是不调用业务 API ；
2. /src/views/components/: 跨业务组件，多个业务都调用的基础组件，可以调用业务 API ；例如用户选择组件；
3. /src/views/users/components/: 业务自身组件，就是楼主所说的详情对话框、编辑对话框，放在对应路由下，类似 RESTful 的思路，按照资源进行组织的，当然，路由、Views 也是 RESTful 的思路进行组织的

[as80393313]

/src/components/dialog.vue 通用的弹窗组件，里面封装通用的弹窗功能，集成修改业务功能，新增业务功能，props 参数，包含增，修改的接口，和表单组件。不传这些就是一个普通的弹窗。dialog 通过 ref 获取表单组件实例，调用表单校验获取数据等。
/src/views/user/__controller__/cru-dialog.vue 具体业务组件，可以看做是一个具体实现的控制层，cru 就是 crud 中 cru 没有删除功能，当然也可以拆开，具体包含了，弹窗唤起增加，修改的业务逻辑，和详情的逻辑，在这里调用通用组件的 dialog 。注意这里只负责具体业务功能，不操作表单。

/src/views/user/components/form/cru-form.vue 具体业务组件的表单，包含表单的所有操作，表单校验，根据实际情况是否拆分详情。为上面的控制器提供表单实体。

这样分开之后，业务具体功能，表单解耦了，弹窗也是。
当对外调用的时候，只需要调用 cru-dialog.vue 组件即可，这个弹窗已经包含了增，改，详情。
由于表单是独立存在，当其他页面业务可能需要详情表单，也可以直接引用表单组件。
这种有参考 MVC 模式的想法。

[giter]

@wuzhanggui 得闲会拜读一下，谢谢：）

[giter]

@AlphaTr 分级分的很合理，目前看过的大多数开源 Vue 项目也是如此，谢谢：）

[sjhhjx0122]

@QuincyX 函数组件可以 inject 只要用 inject 去写创建弹窗,别用 rander 去写就能拿到上下文了

[haodaking]

我们项目的目录结构是这样划分的，src 根目录下有公共的 components 、composables 、api 、assets ，modules 文件夹下是每个模块，每个模块都可以有自己的 components 、composables 、路由、api 、类型、静态资源、国际化文件

[haodaking]

@haodaking 模块注册

[Yjhenan]

我喜欢写个公共组件 ButtonDialog.vue ，然后把弹窗内容单独一个组件，用的时候就用 ButtonDialog 包裹下，这样 Edit 组件方便和 Detail 组件写一块，因为没有 Dialog 这一层，额外用的时候也很方便。
ButtonDialog 默认是按钮，动态组件也方便传其他的

[xingyuc]

src/module/moduleName/views, components, routes, store...
这样每个模块的东西都在自己下面，也可以直接引用其他模块的组件