vue样式穿透不生效（Vue样式穿透）

Vue样式穿透

vue文件的style标签的scoped属性作用：PostCSS在元素标签上添加特殊属性值 
    
    
    ，在样式的选择器后面添加属性选择器
     


     


     


，实现了组件样式的私有化 




 




 




，防止组件之间的样式污染（比如相同类名的元素）    
    
    
。

但在使用scoped属性时 

   

   

   ，会遇到样式问题  


     


     


    。需要使用样式穿透解决

scoped原理

ParentComponent.vue文件 <template> <div> <p class="parent">父组件</p> <ChildComponent></ChildComponent> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent, }, }; </script> <style scoped lang="less"> .parent{ color: red; font-size: 20px; } </style>

在父组件的style标签中启用了scoped属性后
     

     

     

，可以看到父组件的所有元素都添加了相同的特殊属性

  




  




  




，同时在子组件的根元素上也有（只有子组件的根元素才有 


  


  


  ，其他没有
     
     
     
，这里注意到子组件的p标签并没有）


 




 




 


。

.parent选择器也变成了.parent[data-v-xxx]   




   




   




，也就是添加了属性选择器   

   

   

。

遇到问题

使用第三方组件库的组件时 



 



 



 ，时常需要调整子组件内部的样式   

     

     

   。加上scoped属性后               ，发现无法使子组件内部标签选择器的样式生效



  




  




  

。

举例：

现在我想通过.child p选择器
    




    




    




，选择子组件中的p元素














，调整样式                ，这时是没有效果的 ParentComponent.vue文件 <template> <div> <p>父组件</p> <ChildComponent class="child"></ChildComponent> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent, }, }; </script> <style scoped lang="less"> .child p { color: red; font-size: 20px; } </style>

可以看到
     



     



     



，这时的选择器变成了.child p[data-v-xxx]














，属性选择器加到了p后面 
    
    
    ，但是在图一我们看到子组件的p标签是没有特殊属性的
     


     


     


，所以这时样式没有生效  


  


  


。

通过样式穿透 




 




 




，可以解决这个问题    
     
     
  。

解决方案：样式穿透

vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法




   




   




   
。

css 使用 >>> less 使用 /deep/ scss 使用 ::v-deep ParentComponent.vue文件 <style scoped lang="less"> .child /deep/ p { color: red; font-size: 20px; } </style>

可以看到 

   

   

   ，/deep/放在谁的后面
     

     

     

，属性选择器就加在哪个选择器的后面 



 



 



。图中显示这时属性选择器在.child选择器后面  




  




  




，选择器这时筛选过滤出来的是“具有.child类名和具有[data-v-xxx]属性的元素的所有子元素中的p元素    
    
    
” 


  


  


  ，效果符合预期                。