vue中的scoped穿透

匆匆那年→知识库

1.Vue中的style标签上有一个特殊的属性scoped。当style标签拥有scoped属性时候，它的css样式只能作用于当前的Vue组件，防止组件之间污染。

2.PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，这种做法使得样式只作用于含有该属性的dom元素。

转译前

<style scoped>
    .eg{
        color:red;
    }
</style>
<template>
    <div class="eg">scoped测试</div>
</template>

转译后

.eg[data-v-5555666a] {
  color: red;
}
<template>
    <div class="eg" data-v-5555666a>scoped测试</div>
</template>

3.scoped穿透

普通css的样式穿透 使用>>>

    //外层 >>> 第三方组件   
   .wrap>>> .el-input__inner{
      height: 1rem;
    }

sass和less的样式穿透 使用/deep/

    //外层 /deep/ 第三方组件
    .wrap /deep/ .el-input__inner{
       height: 1rem;
    }

其他方法

1.在vue组件中使用两个style标签，一个加scoped属性，一个不加scoped属性，把需要覆盖的css样式写在不加scoped属性的style标签中。
2.建一个css文件，里面写覆盖的css样式，在入口文件main.js 中引入。
3.在vue组件中不使用scoped属性。