Vue中的Scoped和scoped穿透

.example{color:red;}1.什么是scopedVue文件中style标签上有一个特殊的属性，scoped。当一个style标签带有scoped属性时，其css样式只能在当前Vue组件中使用，这样组件的样式就不会相互污染。如果一个项目的所有样式标签都加上scoped属性，就相当于实现了样式的模块化。2、scoped的实现原理Vue中scoped属性的作用主要是通过PostCss来实现的。以下是翻译前的代码：.example{color:red;}翻译后：.example[data-v-5558831a]{color:red;}两者：PostCSS给组件中的所有dom添加一个唯一的动态属性，并在css选择器中添加对应的属性选择器进行选择组件中的dom。此方法使样式仅适用于包含此属性的dom元素（在组件dom内）。总结：scoped渲染规则：给HTMLdom节点添加一个唯一的data属性（例如：data-v-5558831a）来唯一标识每个css选择器末尾的dom元素（编译后生成的css语句）添加一个data属性当前组件的选择器（例如：[data-v-5558831a]）将样式私有化3.scoped穿透scoped似乎效果很好。当时在vue项目中，当我们引入第三方组件库时（比如使用vue-awesome-swiper实现移动轮播），需要修改部分第三方组件库的样式组件，但您不想删除scoped属性以导致组件之间的样式覆盖。这时候我们可以通过一种特殊的方式来穿透scoped。stylus的样式穿透使用>>>外层>>>第三方组件样式。wrapper>>>.swiper-pagination-bullet-active背景:#fffsass和less样式穿透使用/deep/外层/deep/第三方组件{style}.wrapper/deep/.swiper-pagination-bullet-active{背景：#fff；}3.其他在组件中修改第三方组件库样式的方式我们在上面介绍了在使用scoped属性时，通过scopd渗透修改引入第三方组件库样式的方式。下面我们介绍其他修改引入第三方组件库样式的方法。vue组件中没有使用scoped属性。vue构建中使用了两个style标签，一个是添加了scoped属性，一个没有scoped属性，在没有scoped属性的style标签中写上需要覆盖的css样式，创建一个reset.css（基础全局style)文件，把覆盖的css样式写在里面，进入main.css。js介绍