vue 中 style 的私有作用域 scoped 和深度作用选择器 >>> 及 /deep/ 用法

朱雀 2021-03-29 11:02 559阅读 0赞

### 前言

我们在用 vue 开发项目时，在给当前组件中的元素设置样式，为了不污染全局样式，一般会在当前组件的 `<style>` 标签中增加 scoped 属性，表明 CSS 只作用于当前组件中的元素。

### 实现原理

按 vue 官方解释，scoped 是通过使用 PostCSS 来实现以下转换，以达到不污染全局样式。

```
<style scoped>
.example {
    color: red;
}
</style>

<template>
    <div class="example">hi</div>
</template>
```

转换为：

```
<style>
.example[data-v-f3f3eg9] {
    color: red;
}
</style>

<template>
    <div class="example" data-v-f3f3eg9>hi</div>
</template>
```

分析后可知，PostCSS 处理组件 scoped 样式时，给 HTML 的 DOM 节点加一个不重复属性 data-v-f3f3eg9 标志唯一性。如果组件内部还有组件，只会给当前的组件增加类似属性，不影响组件内部引用的组件。

### 深度作用选择器

在使用 scoped 属性后，达到了样式的组件隔离作用，但是如果引用它的父组件，想修改/增加其样式时，只能通过深度作用选择器来实现。

**>>> 操作符：**

```
<style scoped>
.a >>> .b { /* ... */ }
</style>
```

有些像 less、sass 之类的 css 预处理语言，无法正确解析 >>>。我们可以使用 /deep/ 操作符取而代之。

**/deep/ 操作符：**

```
<style lang="scss" scoped>
.a {
    /deep/ .b {
        /* ... */
    }
}
</style>
```

### 结束语

深度作用选择器实际上违反了 scoped 属性的意义，且过多使用 scoped 会导致页面打包文件体积增大。实际开发中我们应该尽量避免或少使用。可以采用加 class 名称前缀的方式避免样式污染，如：ivu-row-flex-middle。

发表评论取消回复

表情：

评论列表（有 0 条评论，559人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue_Scoped】scoped作用

what？？ > 在vue文件中的style标签上，有一个特殊的属性：scoped。 > 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的

小鱼儿/ 2024年03月16日 21:24/ 0 赞/ 62 阅读

相关 vue 中 style 标签中的 scoped 属性（作用域）和 lang 属性的介绍

阅读目录 1、什么是 CSS 预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。 CSS

缺乏、安全感/ 2023年10月06日 23:50/ 0 赞/ 4 阅读

相关 style 标签属性 scoped 的作用和原理

在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性，对于这个 scoped 属性的了解做一下介绍。 1、作用当 style 标签里面有 s

约定不等于承诺〃/ 2023年01月09日 15:50/ 0 赞/ 214 阅读

相关作用域(scope)

1. 什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性 function

r囧r小猫/ 2022年11月22日 05:27/ 0 赞/ 203 阅读

相关作用域(scope)

1. 什么是作用域作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性 function

怼烎@/ 2022年11月20日 05:55/ 0 赞/ 209 阅读

相关 scope作用域

依赖范围 1.test:测试范围,编译和打包都不会引入依赖 2.compile:编译范围,编译和打包都会加入依赖 3.provided:编译和测试时的范围,打包时不

古城微笑少年丶/ 2022年10月01日 04:53/ 0 赞/ 515 阅读

相关 vue：style标签中的scoped属性（作用域）和lang属性的介绍

1、什么是CSS预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增

叁歲伎倆/ 2022年09月02日 04:15/ 0 赞/ 218 阅读

相关 spring中scope作用域

今天研究了一下scope的作用域。默认是单例模式，即scope=”singleton”。另外scope还有prototype、request、session、global se

- 日理万妓/ 2022年06月06日 23:08/ 0 赞/ 218 阅读

相关 4.Bean的Scope作用域用法

基本的作用域在面向对象程序设计中一般指对象或变量之间的可见范围。而在Spring容器中是指其创建的Bean对象相对于其他Bean对象的请求可见范围。Spring提供“s

谁借莪１个温暖的怀抱￠/ 2021年09月20日 14:36/ 0 赞/ 351 阅读

相关 vue 中 style 的私有作用域 scoped 和深度作用选择器 >>> 及 /deep/ 用法

前言我们在用 vue 开发项目时，在给当前组件中的元素设置样式，为了不污染全局样式，一般会在当前组件的 <style> 标签中增加 scoped 属性，表明 CSS 只...

朱雀/ 2021年03月29日 11:02/ 0 赞/ 560 阅读