Scoped 样式穿透

scoped 样式穿透

1、Vue 组件内存在样式污染问题

<father class="item">
  <child></child>
</father>

上面这段代码中假如 child 组件里也使用了名为 item 的 class，那么就会导致样式污染

2、scoped

<style lang="less" scoped>
  .item {
    font-size: 15px;
  }
</style>

我们在 style 标签里加上 scoped 就可以解决以上问题，它是怎么做到的？

3、scoped 原理

在 vue 去编译组件的时候，如果当前 style 标签上有 scoped 属性，那么就会为当前所有标签添加上一个 data-v-hash 的属性，而当前样式表的所有尾部选择器后面也会加上该属性，那么就使得当前组件内的样式只作用域当前组件内的元素。

<father class="item" data-v-b45036b2>
  <child data-v-b45036b2 data-v-384b136e></child>
</father>

注意：子组件如果也是用 scoped，那么子组件最外层的标签会被加上当前组件的 hash 值，又会加上父级组件的 hash 值。

4、问题

在使用 scoped 的时候，会发现一个问题，就是我们在当前组件内使用了 scoped 后，我们同时想去改变子组件的样式。这种情况下，我们发现子组件的样式不会改变。

5、原因

样式的 hash 值，取到了父组件的 hash 值，而子组件的标签上是子组件的 hash 值，css 和 标签上的 hash 值对不上

6、deep

• 1、父组件不加 scoped 属性，写一个 style 去覆盖子组件的样式
• 2、使用 /deep/ 属性放到 css 样式前面，解析的时候，会将 /deep/ 替换成对应组件的 hash 值