vue 实现穿透

Vue 样式穿透的实现方法

在 Vue 中，样式穿透通常指在带有 scoped 属性的样式块中，强制影响子组件的样式。以下是几种常见的实现方式：

使用 >>> 或 /deep/ 选择器

在 scoped 样式中，可以使用 >>> 或 /deep/ 来穿透子组件样式：

.parent >>> .child {
  color: red;
}

/* 或使用 /deep/ */
.parent /deep/ .child {
  color: red;
}

使用 ::v-deep 选择器

在 Vue 3 或某些预处理器中，推荐使用 ::v-deep：

.parent ::v-deep .child {
  color: red;
}

全局样式与局部样式结合

如果不需要 scoped，可以直接在组件中定义全局样式：

<style>
.parent .child {
  color: red;
}
</style>

使用 CSS Modules

在配置了 CSS Modules 的项目中，可以通过 :global 实现穿透：

<style module>
:global(.parent .child) {
  color: red;
}
</style>

动态类名绑定

通过 :class 动态绑定类名，间接实现样式穿透：

<template>
  <child-component :class="$style.child" />
</template>

<style module>
.child {
  color: red;
}
</style>

注意事项

• >>> 和 /deep/ 在某些预处理器（如 Sass）中可能无效，需改用 ::v-deep。
• 过度使用样式穿透可能导致样式污染，建议优先通过组件通信（如 props）解决样式问题。
• Vue 3 已弃用 /deep/，推荐使用 ::v-deep 或 :deep()。