1.问题描述：重构系统中某个功能模块时遇到的一些问题（一）代码抄袭严重，一模一样结构和写作方法写了二十多遍。(2)明明是某个功能组件已经封装好了，不同的人开发的时候却写的一头雾水。2、重构时遇到的问题：(1)单向数据流问题：Vue希望子组件注册的props只能使用，不能修改。(2)大量使用$parent隐式调用父组件中的数据或方法，导致代码可读性差。(3)将父组件中的public方法抽离到一个类中（调用错地方会造成一些问题），或者通过export一个一个导出，可读性、可维护性、可扩展性也不是很好。其实这是组件封装不合理。既然方法是通用的，为什么封装组件的时候不能直接写方法呢？但是要通过$parent调用，然后提取出来减少代码量？？？(4)子组件中注册了大量的props，但需要修改部分已注册的属性（默认会触发alarm）。然后在父组件中使用$emit修改这个值，然后映射到子组件。虽然告警解决了，但是代码量会急剧增加。也是不合理的，虽然也可以通过给子组件的data和computed写props来解决。但是我认为一个公共组件在父组件中注册大量的属性是不合理的。说白了就是设计缺陷。3.重新设计&合理包装：(1)父组件中的很多属性需要在子组件中使用，使用到的部分属性需要在子组件中进行修改。显然，通过props注册的方式不符合单向数据流的理念。所以我们只有在子组件中注册一个值来判断它当前在哪个父组件下，然后通过这个值在一个打包好的js中获取父组件对应的一堆属性。这样注册的props就不会被改变，并且可以将多个父组件的属性放在一起统一管理。也可以更好的扩展不同的父组件，同时大大减少代码量。(2)将公共方法封装到公共组件中，何必再分离出来。(3)只封装相同的部分。如果多个页面有重叠结构，重叠的部分应该作为公共部分打包到一个组件中。而不同的部分只需要在父组件中与公共组件组合即可。为什么不能将不同的部分也组合成通用组件？我个人理解代码的耦合度会很高，如果后期再改动，解耦会很麻烦。4.部分代码：Common.vueOptions.jsFather.vue5。补充：另外一种解决单向数据流告警的方法是传入一个对象，比如代码中的queryForm。当然queryForm也可以对应的写在options.js中。6.总结：在重构项目的时候，请教了一位老手。他说，好的程序是设计好的，人老了就可以设计了。所以根据我重构时遇到的一些问题，好的设计确实nb！还需要努力。..如果有更好的方法，希望提醒一波~谢谢！
