vue组件style中scoped的作用是什么

        在Vue文件中的style标签上有一个特殊的属性——scoped。scoped属性是 HTML5 中的新属性是一个布尔属性如果使用该属性则css样式仅仅只能应用到当前的Vue组件避免组件之间样式相互影响。如果一个项目的所有style标签都加上了scoped属性相当于实现了样式的模块化。

作用实现组件的私有化不对全局造成样式污染表示当前style属性只属于当前模块组件。

原理scoped会在DOM结构及css样式上加上唯一性的标记【data-v-xxx】属性即CSS带属性选择器以此完成类似作用域的选择方式从而达到样式私有化不污染全局的作用。

什么是scoped穿透

scoped的确很好用但是并不是所有组件中的样式都能满足我们的项目需求有时候我们还是希望根据项目需求适当的修改下组件中的样式。特别是当我们引用第三方组件库时在不修改原组件样式的基础上对组件样式进行适当的调整。这就需要用到特殊的方式来穿透scoped属性达到修改拥有scoped属性的组件中样式的目的。

        scoped穿透:

1.使用 >>> 可以穿透 scoped 属性修改其他第三方组件的样式。

2.使用 sass 或 less 的样式穿透  /deep/

3.用两个style标签一个带scoped属性一个不带 scoped 属性用来修改第三方组件的样式。