Vue 中使用 scoped 深度访问（样式穿透）的指南

2023-09-22 11:55:09

Vue 中使用 scoped 深度访问（样式穿透）的几种方式

在 Vue 中，scoped CSS 是一个有用的功能，它可以防止样式意外地应用到其他组件。但是，在某些情况下，您可能需要访问父组件中的样式。本文将探讨在 Vue 中使用 scoped 深度访问（样式穿透）的几种方法。

1. 使用 >>>（仅适用于 CSS）

如果您使用 CSS 作为 style 的 lang 属性，可以使用 >>> 来穿透作用域并访问父组件的样式。

<style scoped>
  .my-component {
    color: red;
  }

  /* 穿透父组件的样式 */
  >>> .parent-component {
    background-color: blue;
  }
</style>

2. 使用 /deep/（不推荐）

/deep/ 是另一个穿透作用域的伪类，但已不再推荐使用。它可能会导致意外的样式行为，并且在未来的 Vue 版本中可能被弃用。

<style scoped>
  .my-component {
    color: red;
  }

  /* 穿透父组件的样式（不推荐） */
  /deep/ .parent-component {
    background-color: blue;
  }
</style>

3. 使用 ::v-deep（仅适用于 SCSS 或 Less）

在 SCSS 或 Less 中，可以使用 ::v-deep 伪类来穿透作用域。它比 >>> 更具针对性，因为它只影响使用 v- prefix 的样式。

<style scoped>
  .my-component {
    color: red;
  }

  /* 穿透父组件的样式（仅适用于 SCSS 或 Less） */
  ::v-deep .parent-component {
    background-color: blue;
  }
</style>

4. 使用 provide/inject

provide/inject API 允许您在组件之间共享数据和方法。您可以使用此 API 在父组件中提供样式对象，并在子组件中注入它。

// 父组件
export default {
  provide() {
    return {
      styles: {
        // 您的样式对象
      }
    }
  }
}

// 子组件
export default {
  inject: ['styles'],

  <style scoped>
    /* 使用注入的样式对象 */
    .my-component {
      color: styles.color;
    }
  </style>
}