Vue中父组件Scoped样式覆盖子组件Scoped样式异常问题求助

问题原因 #

这是Vue针对scoped样式的特殊设计导致的：

• Vue的scoped样式靠给组件DOM元素添加专属data-v-xxx属性实现隔离，每个组件的scoped样式会自动绑定这个属性选择器，比如父组件的.elDiv会编译成.elDiv[data-v-xxxx]，子组件的编译成.elDiv[data-v-yyyy]。
• 当子组件是单个根节点时，Vue会把父组件的data-v-xxxx属性附加到子组件的根节点上，这时候子组件的button会同时拥有父、子两个组件的data-v属性。
• 父、子组件的.elDiv选择器优先级完全相同（类选择器+属性选择器，权重一致），如果父组件的样式在浏览器中后生效，就会覆盖子组件的背景色。
• 一旦给子组件添加额外内容，子组件变成多根节点，Vue就不会再把父组件的data-v属性附加到子组件的任何节点上，父组件的scoped样式无法匹配到子组件的button，子组件样式自然正常生效。

解决方法 #

1. 给子组件加根容器（推荐） #

把子组件内容包裹在一个根元素里，既规避样式渗透问题，也符合Vue单根节点的开发规范：

<template>
  <div>
    <button class="elDiv">BOTON</button>
  </div>
</template>

2. 用深度选择器提升优先级（仅必要时使用） #

如果要保留子组件单根节点，可以在子组件的scoped样式中使用深度选择器，让子组件样式优先级高于父组件：

<!-- Vue 2 用 ::v-deep -->
<style scoped>
::v-deep .elDiv {
  background-color: blue;
  border-radius: 10px;
  padding: 20px;
}
</style>

<!-- Vue 3 用 :deep() -->
<style scoped>
:deep(.elDiv) {
  background-color: blue;
  border-radius: 10px;
  padding: 20px;
}
</style>

3. 避免类名冲突（最彻底） #

给父、子组件的类名加专属前缀，从根源上避免样式冲突：

<!-- 父组件 -->
<template>
  <div class="parent-elDiv">
    FICHA
    <BotonLlamada />
  </div>
</template>
<style scoped>
.parent-elDiv {
  width: 300px;
  height: 200px;
  background-color: yellow;
  padding: 10px;
  border-radius: 10px;
}
</style>

<!-- 子组件 -->
<template>
  <button class="child-elDiv">BOTON</button>
</template>
<style scoped>
.child-elDiv {
  background-color: blue;
  border-radius: 10px;
  padding: 20px;
}
</style>

内容的提问来源于stack exchange，提问作者Duding