Vue中的作用域和渗透方法

.example{color:red;}什么是作用域？在vue文件中的style标签上，有一个特殊的属性：scoped。当style标签带有scoped属性时，其CSS样式只能应用于当前组件，即该样式只能应用于当前组件元素。通过该属性可以防止组件之间的样式相互污染。如果一个项目中的所有样式标签都有作用域，就相当于实现了样式的模块化。scoped的实现原理vue中scoped属性的作用主要是通过PostCSS翻译来实现的。下面是翻译前的Vue代码：.example{color:red;}翻译后：>.example[data-v-5558831a]{color:red;}即：PostCSS添加给一个组件中的所有dom一个唯一的动态属性，然后在css选择器中添加一个对应的属性选择器来选择组件中的dom，这种做法使得样式只适用于包含该属性的dom——内部dom成分。为什么需要穿透作用域？scoped看起来很漂亮，但是在很多项目中，会出现这样一种情况，就是引用了一个第三方组件，需要在组件本地修改第三方组件的样式，但是scoped属性是未移除导致组件样式污染。这时候就只能通过特殊的方式来穿透scoped了。外层>>>第三方组件{style}通过>>>可以在使用scoped属性时穿透scoped修改其他组件的值。例如：曲线救国的方法其实还有一种曲线救国的方法，就是除了定义一个带有scoped属性的style标签外，定义一个没有scoped属性的style标签attribute，即在vue组件中定义一个全局的style标签，一个style标签，作用域为：/*局部样式*/个人推荐的方法上面两种方法，penetration方法其实违反了scoped属性的意思，曲线救国的方法让代码太丑了。个人推荐第三种方法，即：因为scoped看起来很漂亮，但是包含了很多坑，所以不建议不要使用scoped属性，而是通过在外层dom上加一个uniqueclass来区分不同的组件。这种方式既实现了类似作用域的效果，又方便修改各种第三方组件的样式，代码看起来也比较舒服。