Vue中关于scoped以及scoped样式穿透的原理与使用详解

1. scoped

当多个组件中有相同的元素或相同的类名时,在其中一个组件中更改该元素的样式,会导致所有组件中的样式更改,造成样式污染,若只想该样式在当前组件生效就需要用到scoped

示例

1. 组件demo与demo2

<template>
  <div>
    <h1>demo</h1>
  </div>
</template>

2. 在App.vue中导入组件demo与demo2,此时页面为
   
3. 在组件demo中更改h1的样式,此时两个组件中的h1标签都变为橙色

<template>
  <div>
    <h1>demo</h1>
  </div>
</template>
<style>
h1{
  color: orange;
}
</style>

解决办法

若只想要demo中的h1样式改变,需在demo中的style标签中添加scoped属性

<template>
  <div>
    <h1>demo</h1>
  </div>
</template>
<style scoped>
h1{
  color: orange;
}
</style>

实现原理

1. 给组件中的每个标签添加一个data-v-xxxx属性
   
2. 给<style scoped>标签中的每个选择器的最后一个选择器添加对应data-v-xxxx属性的属性选择器(指如果选择器是复合的如div h1,则给h1添加属性选择器)
   

2. scoped样式穿透

使用scoped会导致一个问题,就是若在当前组件引入一个新的组件,更改新的组件中元素的属性是无法生效的

示例

1. 组件child

<template>
  <div>
    <h2>child</h2>
  </div>
</template>

2. 在demo中引入组件child并更改child中h2的样式,此时样式是不生效的

<template>
  <div>
    <h1>demo</h1>
    <child class="child"></child>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
};
</script>
<style scoped>
h1{
  color: orange;
}
.child h2 {
  color: aqua;
}
</style>

这是由于scoped属性为child第一层元素div添加了data-v-xxxx属性并未给h2添加属性,却在符合选择器中最后一个选择器.child h2的h2后添加属性选择器所导致的

解决办法

使用scoped样式穿透,在选择器.child h2的.child后添加

1. >>>
2. /deep/
3. ::v-deep

<template>
  <div>
    <h1>demo</h1>
    <child class="child"></child>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
};
</script>
<style scoped>
h1{
  color: orange;
}
.child >>> h2 {
  color: aqua;
}
</style>

实现原理

>>>, /deep/, ::v-deep放在谁的后面，属性选择器就加在哪个选择器的后面