vue文件中的style标签上会有一个特殊属性scoped。当一个style标签拥有scoped属性时,他的css样式只能作用于当前的vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加了scoped属性,相当于完成了样式的模块化。
一、scoped的实现原理
scoped渲染规则:
1、给html的dom节点添加一个不重复的data属性(如:data-v-5558831a)来唯一标识这个dom元素
2、给每句css选择器的末尾加一个当前组件的data属性选择器(如:[data-v-5558831a])来私有化样式
转译前
<template>
<div class="example">scoped</div>
</template>
<style scoped>
.example{
color:red;
}
</style>
转译后
<template>
<div class="example" data-v-5558831a>scoped</div>
</template>
.example[data-v-5558831a] {
color: red;
}
二、scoped穿透
在vue项目中,当我们引入第三方插件时,需要在局部组件中修改第三方插件的样式,又不想去掉scoped属性;
1、stylus的样式穿透使用 >>>
外层 >>> 第三方组件{
样式
}
.wrapper >>> .el-checkbox{
background:#fff
}
2、sass和less样式穿透使用/deep/
外层 /deep/ 第三方组件{
样式
}
/deep/ .el-checkbox{
background:#fff;
}
3、vue-cli3编译时,有时deep的方式会报错或者警告,这时候用第三种
::v-deep .b {
background:#fff;
}