vue组件抽象

我们在工作中有这样一种场景，就是我们多个页面其实长的一样，但是后端接口不一样，返回的数据接口不一样，导致我们需要写多个模版，我们追求一种可复用的方式，简单思考一下有几个解决方案

方案一

复用css。我们将css写到一个专门的模块中，然后不同的模版就还是不同的版本写，然后复制粘贴，保证都是一样的class。然后我们只需要改里面获取的数据字段值

优点

这样的好处是非常简单，而且对于后面的数据接口变化我们直接改模版不会有太大的负担，我们可以写新的css。来进行覆盖已有的。

缺点

但是缺点也很明显，css和模版分离了，这样导致后续我们可能为了改一个模版的样式，改了css，导致其他模版没有能够直接进行修改，导致我们出现不可预期的问题。

方案二

将我们的模版统一都写成一个，css模版都是在一个模版中，但是因为数据结构的不同我们将数据接口打平，用js输入的时候我们都将要获取的数据结构都用自己的格式进行处理成我们所需要的格式，

优点

这样我们每次改模版样式就非常方便

缺点

但是增加了我们要格式化数据的成本，我们要设计好模版所需的基本样式，如果以后需要新的模版就采用新的方式就可以了。我们将数据专门隔离出来写。

总结

综合考虑使用方案二，需求的时候要考虑到所有的模版二级页都要复用。