【Vue组件封装】- 单向数据流告诉我如何更好的封装公共组件

1.问题描述：在重构系统中一个功能模块的时候遇到的一些问题

（1）代码拷贝严重，同样的结构写&方法写了二十多遍。
（2）明明已经封装好某个功能组件，不同的人开发时又稀里糊涂的写了一顿。

2.重构时遇到的问题：

（1）单向数据流的问题：Vue希望子组件中注册的props只能被使用不能被修改。
（2）大量使用$parent隐式的调用父组件中的数据或方法，导致代码可读性很差。
（3）将父组件中的公共方法抽离到一个class中（调用的地方不对会导致一些问题）、或者通过export逐个导出，同样可读性、可维护性、扩展性都不怎么样。其实这就是组件封装的不合理，既然方法是通用的为什么不能直接在封装组件的时候将方法写好？而要通过$parent调用，然后再抽离出去以减少代码量？？？
（4）在子组件中大量的注册props，但注册的有些属性是需要被修改的（默认会报警）。然后通过$emit的方式修改父组件中的这个值再映射到子组件，虽然解决了报警，但代码量会剧增。同样不合理，虽然也可以通过将props写入到子组件的data、computed中的方式解决。但是我觉得，一个公共组件大量的注册父组件中的属性本来就是不合理的，说白了就是设计上的缺陷。

3.重新设计&合理封装：

（1）子组件中需要用到父组件中的很多属性，并且用到的某些属性又需要在子组件中被修改。很明显通过props注册的方式是不符合单向数据流的理念的。所以我们只在子组件中注册一个值，用来确定当前是在哪个父组件下，然后通过这个值在一个封装好的js中获取对应父组件的一堆属性。这样既不会改变注册的props也能将多个父组件的属性放到一起方便统一管理，还能更好的对不同的父组件进行扩展，同时大量的降低了代码量。
（2）把公共方法封装到公共组件中，何必再进行一次抽离。
（3）只封装相同的部分。如果多个页面有重合的结构，那么重合的部分应该当成公共部分封装到一个组件里。而不同的部分只需要在父组件中与公共组件进行组合即可。为什么不能把不同的部分也组合到公共组件里？我个人理解，这样做代码的耦合度会很高，如果后期进行改动，则解耦又会很麻烦。