样式穿透/deep/

一、scoped

vue通过在<style> 里加入scoped 保证样式不会作用到子组件内，防止样式污染。

原理是给生成的dom加上一个“data-v序列号”的属性，再添加样式到对应的dom。

例子：

<template>
<div class="page">
this is page
</div> 
</template> 

<style> 
.page { 
color: red; 
} 
</style>

这时候浏览器会生成带属性的div

<div class="page" data-v-88888888>

　　

二、样式穿透 /deep/

我们经常会在组件中用到第三方组件，比如element-card，这时候想要改变第三方组件的样式，需要添加/deep/。

比如我在项目中插入了element-card组件:

<element-card class="box">
<div class="son">
this is son 
</div>
</element-card>


<style scoped> 
.box {
    .son {
    color: blue;
    }
}
</style>

浏览器生成的dom是

<div class="box" data-v-88888888>
<div class="son">
this is son 
</div>
</div>

1，不添加/deep/，样式会作用在 .box[data-v-888888888] .son[data-v-88888888]上，由于没有这个节点所以失败。

2，添加/deep/，样式会作用在 .box[data-v-888888888] .son上，样式成功作用在子组件上。

 

标签：box,样式,deep,son,穿透,组件,data
来源： https://www.cnblogs.com/coldyouth/p/16544375.html