私有作用域

在<style>标签上添加scoped属性，可以使样式只在当前组件生效，样式私有化，避免影响其他的组件，造成全局污染。

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

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

原理：
上述代码会通过PostCSS转换成：

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

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

通过给一个组件中的所有dom节点添加了一个唯一的data属性，并且给css选择器添加当前组件对应的data属性选择器来私有化样式

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得更深，影响到子组件，你可以使用 深度作用选择器>>>。

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

上述代码会转换成：

.a[data-v-f3f3eg9] .b { /* ... */ }

因为后面的那个类没加组件的data属性选择器，所以就能选到子组件里面的类了

别名

/deep/是>>>的别名，有些像 Sass，Less 之类的预处理器无法正确解析 >>>，所以使用/deep/代替

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

应用

平时写项目肯定会用第三方的组件，比如iview，element-ui，mint-ui，vux-ui，swiper等等，想要修改第三方组件的样式，但又不想去掉scoped属性，影响别的组件。

方式一

使用深度作用选择器：

<style scoped>
    外层组件类 >>> 第三方组件内部类 {
        样式
    }
</style>

方式二

一个组件中可以使用多个style，同时使用有 scoped 和非 scoped 样式：

<style>
/* 全局样式 */
/* 将修改第三方组件的样式写在这里 */
/* 组件的最外层标签定义一个唯一类，最好将样式都写在这个类名下，以防组件间互相影响 */
</style>

<style scoped>
/* 本地样式 */
</style>

提示

表层的一些样式，比如你在HTML页面中写出来标签的那些，如果加类名就可以实现修改样式，没必要使用深度选择器

文档

scoped

网站导航

网站导航