Vue 样式穿透语法大全（涵盖 Vue2、Vue3、Less、Scss 等）

1. 什么是样式穿透？

样式穿透是在使用 Vue 组件时，为了修改子组件或第三方组件的样式而使用的一种特殊语法。当我们使用 scoped 样式时，由于样式被限制在当前组件内，要修改子组件的样式就需要使用样式穿透。

2. 为什么需要样式穿透？

2.1 Scoped 样式的局限性

<!-- 父组件 -->
<template>
  <div class="parent">
    <child-component class="child" />
  </div>
</template>

<style scoped>
.child {
  /* 这里的样式只会影响到子组件的根元素 */
  /* 无法影响到子组件内部的元素 */
  color: red;
}
</style>

2.2 常见使用场景

1. 修改第三方组件样式
2. 修改子组件内部元素样式
3. 覆盖默认主题样式

3. 不同版本的样式穿透语法

3.1 Vue2 中的样式穿透

<!-- 1. 使用 >>> 操作符 -->
<style scoped>
.parent >>> .child {
  color: red;
}
</style>

<!-- 2. 使用 /deep/ -->
<style scoped>
.parent /deep/ .child {
  color: red;
}
</style>

<!-- 3. 使用 ::v-deep -->
<style scoped>
.parent ::v-deep .child {
  color: red;
}
</style>

3.2 Vue3 中的样式穿透

<!-- 推荐写法 -->
<style scoped>
/* 方式1：直接作用于子元素 */
:deep(.child) {
  color: red;
}

/* 方式2：从父元素开始 */
.parent :deep(.child) {
  color: red;
}
</style>

4. 在不同预处理器中的使用

4.1 SCSS/SASS 中的使用

<style lang="scss" scoped>
/* Vue2 中 */
.parent {
  /deep/ .child {
    color: red;
  }
  
  ::v-deep .child {
    color: red;
  }
}

/* Vue3 中 */
.parent {
  :deep(.child) {
    color: red;
  }
}
</style>

4.2 LESS 中的使用

<style lang="less" scoped>
/* Vue2 中 */
.parent {
  /deep/ .child {
    color: red;
  }
}

/* Vue3 中 */
.parent {
  :deep(.child) {
    color: red;
  }
}
</style>

5. 实际应用示例

5.1 修改第三方组件样式

<!-- 修改 Element Plus 组件样式 -->
<template>
  <div class="custom-form">
    <el-form>
      <el-input v-model="value" />
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.custom-form {
  /* Vue3 写法 */
  :deep(.el-input) {
    .el-input__inner {
      border-radius: 8px;
      border-color: #409EFF;
    }
  }
}
</style>

5.2 修改多层级嵌套组件

<style scoped>
.parent {
  /* 多层级选择器 */
  :deep(.level-1) {
    .level-2 {
      .level-3 {
        color: blue;
      }
    }
  }
}
</style>

6. 其他深度选择器

6.1 插槽选择器（:slotted）

<style scoped>
/* 修改插槽内容的样式 */
:slotted(.slot-class) {
  color: red;
}
</style>

6.2 全局选择器（:global）

<style scoped>
/* 添加全局样式 */
:global(.global-class) {
  color: blue;
}
</style>

7. 版本迁移建议

如果你正在将项目从 Vue2 迁移到 Vue3，建议：

1. 将所有 >>> 替换为 :deep()
2. 将所有 /deep/ 替换为 :deep()
3. 将所有 ::v-deep 替换为 :deep()

8. 总结

样式穿透是 Vue 中解决组件样式隔离问题的重要工具：

1. 使用场景：

   • 修改第三方组件样式
   • 修改子组件内部样式
   • 处理插槽内容样式

2. 语法选择：

   • Vue3 中统一使用 :deep()
   • 避免使用已废弃的语法
   • 根据预处理器选择合适的写法

通过合理使用样式穿透，我们可以更好地控制组件样式，同时保持代码的可维护性和性能。