《Vue中的scoped和scoped穿透》

发表于 分类于 ， Valine：

在 Vue 文件中的 style 标签上有一个特殊的属性 scoped。当一个 style 标签拥有 scoped 属性时候，它的 css 样式只能用于当前的 Vue 组件，可以使组件的样式不相互污染。如果一个项目的所有 style 标签都加上了 scoped 属性，相当于实现了样式的模块化。

1
<style lang="less" scoped>

scoped 实现原理

Vue 中的 scoped 属性的效果主要是通过 PostCss 实现的。以下是转译前后的代码:

转译前

1
2
3
4
5
6
7
8
<style lang="less" scoped>
    .example{
        color:red;
    }
</style>
<template>
    <div class="example">scoped测试案例</div>
</template>

转译后

1
2
3
4
5
6
7
8
<style>
    .example[data-v-5558831a] {
      color: red;
    }
</style>
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

PostCSS 给一个组件中的所有 DOM 添加了一个独一无二的动态属性，给 css 选择器额外添加一个对应的属性选择器，来选择组件中的 DOM,这种做法使得样式只作用于含有该属性的 DOM 元素(组件内部的 DOM)

总结：scoped 的渲染规则

  • 给 HTML 的 DOM 节点添加一个不重复的 data 属性(例如: data-v-5558831a)来唯一标识这个 DOM 元素
  • 在每句 css 选择器的末尾(编译后生成的 css 语句)加一个当前组件的 data 属性选择器(例如：[data-v-5558831a])来私有化样式

scoped 穿透

stylus 的样式穿透 使用 >>>

1
2
3
4
5
外层 >>> 子组件元素
  样式

.wrapper >>> .swiper-pagination-bullet-active
  background: #fff

sass 和 less 的样式穿透 使用/deep/

1
2
3
4
5
6
外层 /deep/ 子组件元素 {
    样式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
    background: #fff;
}