2.12 vue中css scoped的原理

html-css028

2.12 vue中css scoped的原理,第1张

1.在组件中增加的css加了scoped属性之后，就在会在当前这个组件的节点上增加一个 data-v-xxx属性。

2.此组件的所用的css，都会被设置为属性选择器例如下：

3.通过css的属性选择器从而解决了多个组件重复的class，会导致冲突的问题

前两天在项目中遇到一个问题，需要手动去修改引入的第三方组件的CSS样式，我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式，结果当然是行不通的（不然我现在也不会在这里写这篇）。 于是我查了一下，是因为我在vue组件里面将设置成了局部样式，局部样式只在当前组件生效，对引入的其他组件是无法起作用的。然后我试了一下，把 scoped 去掉就行了。 或者在组件里面写多一份全局样式 但是如果不在style里面写 scoped ，直接写成全局样式，最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢，我想到以前涉及过的一个名词 样式穿透 ，立刻实践了一下，果然就成了。样式穿透 需要定义一个外层的style，通过 >>>可以使得socped属性下的的样式穿透到全局， 外层 >>>第三方组件 或者 外层 /deep/ 第三方组件 。 >>>是 /deep/ 的别名，但是在sass之类的样式预处理器之中无法正确解析。

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的组件，使得该css样式不影响到其他组件或本组件的子组件，也保护的本组件的样式不受其他组件影响。很好的实现了样式私有化的目的，这是一个非常好的机制。

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css。

但是，在开发时我们有时需要对公共组价的样式进行修改，而如果公共组件添加了scoped属性，就会导致它的样式不易（不可）修改，这在项目开发中会造成一定影响，所以正确的做法应该是：

在项目中，使用的是 vue + Element UI 的开发模式，而在使用 Element UI 框架时，常常需要对其原本的样式进行调整，如果我们在使用时直接在组件的 style 对其进行修改而没有加上 scoped ，就会导致这个UI组件的样式被全局修改了，往后的使用自然是会受到影响的。或者是我先前使用改过这个 UI 组件，那么它有可能会对先前的样式进行覆盖，并且很难排查。所以，我们应该在每一个组件的 style 加上 scoped

使用 scope 同时也会导致一个问题，在使用第三方UI框架如element-ui时，由于使用了 scope 导致本css无法对子组件的样式进行修改。此时解决方案有两个

将会被编译成

这样实现了子组件样式的修改，同时也不会影响全局样式。。