vue中scoped原理以及scoped的穿透用法

在Vue.js中，scoped 是一种用于组件样式隔离的技术。它确保组件的样式仅应用于组件本身，而不会影响到其他组件。这是通过为每个组件生成唯一的属性选择器来实现的。下面详细解释了scoped的原理以及scoped穿透的用法。

scoped 原理

当你在一个Vue组件的 <style> 标签中添加 scoped 属性时，Vue会为该组件中的每个样式生成一个唯一的属性选择器。这个属性选择器会被添加到组件的根元素及其子元素上，确保样式仅应用于这个组件。具体的实现机制如下：

1. 编译时处理 ：当Vue组件被编译时，Vue编译器会为每个带有 scoped 属性的 <style> 标签生成一个独特的属性（例如 data-v-123abc）。

2. 样式变换 ：编译器会将组件中的每个CSS选择器修改为包括这个唯一属性。例如：

   .example {
       color: red;
   }

   会被转换为：

   .example[data-v-123abc] {
       color: red;
   }

3. 属性注入 ：编译器会在组件的根元素及其子元素上注入这个唯一的属性。例如：

   <div class="example">Hello World</div>

   会被转换为：

   <div class="example" data-v-123abc>Hello World</div>

通过这种方式，样式只会应用于包含相同属性的元素，避免了样式的全局污染。

scoped 的穿透用法

在某些情况下，你可能需要为 scoped 样式添加一个全局样式或修改子组件的样式。为此，你可以使用几个CSS技巧来"穿透" scoped 限制。

1. 使用深度选择器 ::v-deep （Vue 3）：

   Vue 3 提供了 ::v-deep 伪选择器来实现样式穿透。它可以用于子组件或其他深层次的选择器。

   <style scoped>
   .parent-class ::v-deep .child-class {
       color: blue;
   }
   </style>

2. 使用深度选择器 /deep/ 或 >>> （Vue 2）：

   在Vue 2中，深度选择器可以使用 /deep/ 或 >>>，这两个选择器在Vue 3中已经被弃用。

   <style scoped>
   .parent-class /deep/ .child-class {
       color: blue;
   }
   </style>

   或者

   <style scoped>
   .parent-class >>> .child-class {
       color: blue;
   }
   </style>

3. 全局样式 ：

   如果你有些样式需要全局应用而不仅限于某个组件，可以在不使用 scoped 属性的 <style> 标签中定义这些样式，或者在全局CSS文件中定义。

示例代码

<template>
  <div class="parent-class">
    <ChildComponent />
  </div>
</template>

<style scoped>
.parent-class {
  font-size: 20px;
}

/* 使用深度选择器穿透 scoped 限制 */
.parent-class ::v-deep .child-class {
  color: blue;
}
</style>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

在这个示例中，.parent-class 的样式只会应用于当前组件，而 .parent-class ::v-deep .child-class 的样式则会应用于子组件 ChildComponent 中的 .child-class 元素，即使它们在一个 scoped 样式块中。

总结

scoped 样式通过为每个组件生成唯一的属性选择器来实现样式隔离，防止样式污染其他组件。使用深度选择器 ::v-deep 可以实现 scoped 样式的穿透，允许你在子组件中应用特定的样式。在需要全局样式的情况下，可以直接使用未 scoped 的样式块或全局CSS文件。