面试题 vue组件style中scoped的作用

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

作用：

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

原理：

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

scoped穿透

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

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

<style scoped>
    外层 >>> 第三方组件{
        样式
    }
</style>

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

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

<style>
    /*全局样式*/
</style>

<style scoped>
    /* 局部样式 */
</style>