Vue中组件样式scoped实现原理及穿透使用步骤详解

这次给大家带来Vue中scoped实现原理及穿透使用步骤详解，Vue中scoped实现原理及穿透使用的注意事项有哪些，下面就是实战案例，一起来看一下。何为scoped？在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染

LavanSum

2577人浏览 · 2018-07-13 16:34:55

LavanSum · 2018-07-13 16:34:55 发布

这次给大家带来Vue中scoped实现原理及穿透使用步骤详解，Vue中scoped实现原理及穿透使用的注意事项有哪些，下面就是实战案例，一起来看一下。

何为scoped？

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：

 
      <style scoped> 
     
      .example { 
     
      color: red; 
     
      } 
     
      </style> 
     
      <template> 
     
      <p  
      class 
      = 
      "example" 
      >hi</p> 
     
      </template>

转译后：

 
      <style> 
     
      .example[data-v-5558831a] { 
     
      color: red; 
     
      } 
     
      </style> 
     
      <template> 
     
      <p  
      class 
      = 
      "example" 
      data-v-5558831a>hi</p> 
     
      </template>

即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

为什么需要穿透scoped？

scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

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

通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。

曲线救国的方法

其实，还拥有一种曲线救国的方法，即在定义一个含有scoped属性的style标签之外，再定义一个不含有scoped属性的style标签，即在一个vue组件中定义一个全局的style标签，一个含有作用域的style标签：

 
      <style> 
     
      /* global styles */ 
     
      </style> 
     
      <style scoped> 
     
      /* local styles */ 
     
      </style>