vue - vue中的scoped样式隔离及样式穿透

在Vue 2中，scoped样式默认不会传递到子组件。但有几种情况和方法可以实现样式穿透，让父组件的scoped样式影响子组件：

1. 默认行为：scoped样式不影响子组件

当你在父组件中使用scoped属性时，Vue会通过生成唯一的属性选择器（如data-v-123456）来限制样式的作用域。这些样式只会应用到当前组件的根元素及其内部的原生DOM节点，不会影响子组件的根元素或内部节点。

示例：

<!-- 父组件 -->
<template>
  <div class="parent">
    <ChildComponent /> <!-- 子组件 -->
  </div>
</template>

<style scoped>
.parent {
  color: red; /* 只会应用到父组件的div */
}
</style>

2. 例外情况：子组件的根元素会继承父组件的scoped样式

如果子组件的模板只有一个根元素，父组件的scoped样式会作用于这个根元素（但仅限于根元素）。

示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div class="child"> <!-- 父组件的scoped样式会作用于这个根元素 -->
    <p>子组件内容</p> <!-- 不会受影响 -->
  </div>
</template>

3. 强制样式穿透：使用::v-deep或/deep/（Vue 2特定）

如果需要让scoped样式影响子组件的内部元素，可以使用深度选择器：

• ::v-deep（推荐）
• /deep/（旧语法，Vue 3已移除）
• >>>（仅适用于非CSS预处理器）

示例：

<style scoped>
/* 影响子组件的所有.child类元素 */
::v-deep .child {
  color: blue;
}

/* 更具体的选择器 */
::v-deep .parent .child {
  font-size: 14px;
}
</style>

4. 使用全局样式

如果你希望样式全局生效，可以在父组件中定义不带scoped的样式：

<style>
/* 全局样式，会影响所有组件 */
.child {
  color: green;
}
</style>

<style scoped>
/* 仅作用于父组件的样式 */
.parent {
  background: lightgray;
}
</style>

5. 通过CSS变量传递样式

可以在父组件中定义CSS变量，子组件可以继承这些变量：

<!-- 父组件 -->
<template>
  <div class="parent" style="--text-color: red;">
    <ChildComponent />
  </div>
</template>

<style scoped>
.parent {
  color: var(--text-color); /* 父组件自身生效 */
}
</style>

<!-- 子组件 -->
<template>
  <div>
    <p style="color: var(--text-color);">继承父组件的颜色</p>
  </div>
</template>

总结

方法	作用范围	推荐场景
默认scoped	仅当前组件（含子组件根元素）	隔离样式
::v-deep	穿透到子组件内部	需要定制子组件样式
全局样式	所有组件	通用样式
CSS变量	基于继承传递样式	灵活的主题定制

建议优先使用默认的scoped样式，只有在必要时才使用样式穿透或全局样式，以保持良好的组件封装性。