详解Vue中使用scope进行样式隔离

一、父子组件设置scoped的各种情况

例如有下面两个父子组件模板

Parent.vue

<template>
  <div class="parent-box">
    <p>parent</p>
    <child></child>
  </div>
</template>

<script setup lang="ts">
import Child from '@/views/test/style-scoped/Child.vue';

</script>

<style>
.test {
  color: blue;
}
</style>

Child.vue

<template>
  <div class="child-box">
    <p class="test">child</p>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
p {
  color: green;
}

</style>

（1）父组件和子组件都设置了scoped
则父组件和子组件的样式互相隔离，互不干扰。
但也有例外，当子组件为单个根节点的时候，会加上父组件的data-v-[hash:8]。这个时候当在子组件的根节点上加上父组件中定义的样式的时候，父组件会影响子组件根元素的样式。

<template>
  <p class="test">child</p>

<!--  <div class="child-box">
    <p class="test">child</p>
  </div>-->
</template>

渲染后父组件中的test类的样式会影响子组件。

（2）父组件不设置scoped,子组件设置scoped
则父组件的样式为全局样式，会影响子组件的样式。

（3）父组件设置scoped，子组件不设置scoped
则子组件的样式为全局样式，会影响父组件中的样式。

（4）父组件和子组件都不设置scoped
则父子组件的样式都为全局样式，父组件的样式会影响子组件，子组件的样式也会影响父组件。

会根据选择器的优先级来进行覆盖。

二、样式穿透

当父组件和子组件都设置了scoped，可以在父组件中使用 :deep()来更改子组件中的样式。

:deep(.test){
  color: blue;
}