当前位置:首页 > 前端 > Vue.js

Vue中css的scoped和scoped穿透

什么是scoped

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

scoped的实现原理

  以下是案例展示

  1. <style scoped>
  2. .example {
  3. color:blue;
  4. }
  5. </style>
  6. <template>
  7. <div class="example">scoped属性的style</div>
  8. </template>

  转义后的格式

  1. <style>
  2. .example[data-v-5558831a] {
  3. color:blue;
  4. }
  5. </style>
  6. <template>
  7. <div class="example" data-v-5558831a>scoped属性的style</div>
  8. </template>

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

scoped穿透

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

  1. 外层 >>> 第三方组件
  2. <style>
  3. .example >>> .el--input{
  4. color:blue;
  5. }
  6. </style>
  7. <template>
  8. <div class="example">
  9. <el-input type="text" />
  10. </div>
  11. </template>
读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部