VUE scoped 和样式穿透
1. scoped
简介
scoped的设计思想就是让当前组件的样式不会污染其他组件的样式,实现样式的模块化,在标签的属性中加入data-v-hash的方式来使css有对应模块的标识。
作用域
scoped的作用域,因为权重的问题,如果是在子组件使用了scoped,那么在父组件中是不能直接修改子组件的样式的,需要在父组件中使用vue的深度作用选择器(后文会介绍)。
规则
- 给HTML的DOM节点加一个不重复data属性(形如:data-v-19fca230)来表示他的唯一性
- 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-19fca230])来私有化样式
- 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
2.穿透样式
穿透样式希望解决scoped对样式私有化过程中对其他组件样式的操纵失败的情形,穿透样式适用于除了简单粗暴的拒绝使用scoped之外的情况
在我们想穿透的选择器前边添加:
>>>
或者 /deep/
或者 ::v-deep
示例
<style lang="less" scoped>
.van-circle {
/deep/ .van-circle__text {
color: blue;
}
}
</style>