vue 如何更好的设计一个公共的新增、编辑页面？

为啥要封装一个公共的新增/编辑页面？表单的编辑本来就是不同功能模块里面的内容不一样啊……怎么公用啊？

如果你希望把 import xxxDialog from './xxxDialog' 这样的导入语句省略掉，可以考虑用 unplugin-vue-components 这个依赖，配置好规则之后就可以自动引入你项目内的插件了。直接可以在模板块里面写 <xxxDialog /> 来使用，手脚架会自动帮你引入对应的自定义组件。

说个题外话，就是你把组件导入和组件使用都放到一个单独的文件里面，那你业务功能页面里面怎么去使用，用你开头想法中挂载在全局的Dialog？那么如果遇到表单有客制化怎么办？以及除了你之外其他的开发组同事怎么知道有这个全局组件可以用。

为啥 Vue3 不在推荐 Mixins 来作为组件间的逻辑复用。就是因为很多东西在外部定义好，在当前组件使用 Mixins 混入之后使用的过程中，除了你之外，其他的人是不知道很多的变量、函数是从哪里来的。也不知道有哪些已经声明好的变量和函数，会增加很多其他的困扰。

不再推荐

在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，使用组合式 API 的组合式函数是现在更推荐的方式。#mixins - 组合选项 | Vue.js

如果你想省略很多东西，可以考虑函数组件使用 createRenderer() 函数挂载在body上面。这样是需要在需要使用的页面上面 import 对应的表单编辑弹窗函数就好了，如果有客制化也可以使用 jsx 去传入自定义模板。

我是不认可把表单弹窗挂在全局的这种使用想法的，有太多太多不合适的理由。与之相似的还有自己基于UI库二次封装一个类似 form-generator 这种的自定义表单/Table组件，期望使用 prop 传入一个 json 树不写 template 来实现很多功能的需求。