浅谈VUE中的样式污染问题

在使用VUE做项目的时候，随着页面的增加，重复调用同一种组件，造成的样式污染问题不容小视。
查找了相关的资料和结合实际项目，我遇到的样式污染问题主要由以下两个原因造成：

1. 使用了同一种组件，却在CSS中对该组件设置了不同的样式；
2. 子元素的根元素会继承父元素的 ScopeId；

目前可以的解决方案是：
1.在写每一个.Vue页面时，一开始就将style设置为scoped（注意：scoped原理就是在css以及html上加一个唯一标识，然后根据权重来实现目的。scoped的作用是使得.Vue中的样式不影响其他的.Vue组件，而不是使Vue组件样式不受外界影响）。但是scoped要慎用，在需要修改公共组建（第三方库或者项目中定制的组件）的样式时，scoped会造成很多麻烦。这种情况可以使用两个style样式，将修改公共组建的样式放在< style>中，其余的样式放在< style scoped>中，具体原因可以参考这篇文章.vue文件加scoped 样式不起作用的解决方法

2.为每一个组件的根元素提供一个特殊的样式名，当一个组件被重复使用的时候，样式很容易重叠，所以每次被使用的时候写一个特殊的class样式名，结合我自身的项目，在同一个.Vue中需要展示三张表格，但是表格的颜色样式互不相同，如果我给这三个表格都设置class=“table”,那么即使在style中设置不同的样式，最终显示还是一样，但是根据特殊的命名方法，分别把class设为sosdatatable，aisdatatable,emergencytasktable,再分别设置样式，就不会相互干扰了。这种特殊的命名方式适合区分重复调用的element-ui自带的组件。例如我使用element-ui自身的分页控件。

对于sos表格，在template中设置分页的div,对于element-ui自带的el-pagination控件，设置一个特殊的class=“page-sosdatatable-cyt”

然后再css样式中直接用class名(.page-sosdatatable-cyt)+属性名称(.el-pager li)设置分页的背景颜色为#272e38
对于emergencytask表格，也是在template中对el-pagination控件设置一个不同于其他表格分页的class=“page-emergencytasktable-cyt”

在CSS样式中用.page-emergencytasktable-cyt .el-pager li设置背景颜色为#172d37
对两张表格的分页控件设置了不同的class,在样式中直接用class名+属性名称来设置不同的背景颜色，这样就避免了样式的重叠和干扰，效果如下：