使用vue3重构项目的一点思考

vue3如何做整页面复用?

场景是,monorepo项目,子项目间总有可以复用的页面,比如说登录页、用户管理和权限管理等。

这些页面大部分情况下都相同,但可能具有不同的用户权限分类,有一些特殊管理员。

使用vue2时,用extend与mixin属性,可以做整个页面的继承,在子页面中覆写基页面的部分方法。

使用vue3后,如何重构这种场景?

首先要明确的是:不能再不伦不类地使用extends, mixin这种东西。

方案一:

使用带插槽的组件写整页。

如果两个页面有区别的部分,说明这部分是该项目特有的业务需求,比如用户管理,项目A需要选择业务管理员所管理的业务,这部分属于项目A的业务需求,就应该放slot里面。

通讯录页面左侧的人员树,也可以抽成单独的组件,或者抽一个组合式函数。

方案二:
组合式函数和组件的区别在于有没有视图部分。
目标是视图一样但使用不同逻辑的话,为什么不直接把逻辑通过props传进去?或者用组合式函数写逻辑?

posted @ 2023-02-26 16:02  有洸  阅读(115)  评论(0)    收藏  举报