VUE scoped 和样式穿透

VUE scoped 和样式穿透

1. scoped

简介

scoped的设计思想就是让当前组件的样式不会污染其他组件的样式，实现样式的模块化，在标签的属性中加入data-v-hash的方式来使css有对应模块的标识。

作用域

scoped的作用域，因为权重的问题，如果是在子组件使用了scoped，那么在父组件中是不能直接修改子组件的样式的，需要在父组件中使用vue的深度作用选择器（后文会介绍）。

规则

1. 给HTML的DOM节点加一个不重复data属性(形如：data-v-19fca230)来表示他的唯一性
2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-19fca230]）来私有化样式
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

2.穿透样式

穿透样式希望解决scoped对样式私有化过程中对其他组件样式的操纵失败的情形，穿透样式适用于除了简单粗暴的拒绝使用scoped之外的情况

在我们想穿透的选择器前边添加：
>>>
或者 /deep/
或者 ::v-deep

示例

<style lang="less" scoped>
.van-circle {
  /deep/ .van-circle__text {
    color: blue;
  }
}
</style>