一、父子组件设置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;}