Vue中css的scoped和scoped穿透

什么是scoped

  Vue文件中的style标签上有一个特殊的属性scoped。当一个style标签拥有scoped属性时候，它的css样式作用于只限制于当前的Vue组件，这样可以使组件之间的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，那相当于实现了页面组件的样式私有化。

scoped的实现原理

  以下是案例展示

<style scoped>
    .example {
        color:blue;
    }
</style>
<template>
    <div class="example">scoped属性的style</div>
</template>

  转义后的格式

<style>
    .example[data-v-5558831a] {
        color:blue;
    }
</style>
<template>
    <div class="example" data-v-5558831a>scoped属性的style</div>
</template>

  从上面的列子可以看出，css 样式是被私有化的，这样可以避免样式局部污染。我们在实际开发过程中，会经常用的第三方的组件或自定义组件，指定某个页面需要重置下组件的样式，那该如何解决？scoped穿透了解下！！！

scoped穿透

穿透的使用方式非常简单，如下

外层 >>> 第三方组件
<style>
    .example >>> .el--input{
        color:blue;
    }
</style>
<template>
    <div class="example">
        <el-input type="text" />
    </div>
</template>