vue中的scoped属性和样式穿透

本文主要介绍了vue样式的scoped属性,和样式穿透的几种实现方式，文章对示例代码进行了非常详细的介绍，对大家的学习或工作具有一定的参考学习价值。 需要的朋友，跟着小编一起学习学习吧。

scoped属性

我们通常在<style>标签中写vue组件中的样式，但是我们这里的样式默认是全局样式。 如果其他组件出现类名重复，就会造成样式污染。

所以vue支持给<style>标签添加scoped属性，这样当前组件的样式只会在当前样式生效，其他组件不受影响。比如：

<div class="page">
  <span>hello world</span>
</div>
<style lang="scss" scoped> 
.page {
  span{
    color: #f00;
    font-size: 18px;
  }
}
</style>

最终在浏览器渲染出来发现，div和span上都带有特殊属性:data-v-*****

，然后css的样式最终也会带上这些属性，根据这些属性找到元素。这样子避免样式全局污染。

但是如果在Vue项目中，需要引入第三方组件库时(比如饿了么的element-ui组件库)，想在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的样式穿透来解决，下面就介绍关于vue中样式穿透的几种实现。

1、less和node-sass的样式穿透

这俩个常用的样式穿透的方式 有俩种 分别是 /deep/ 与 ::v-deep

外层容器 /deep/ 组件 { }

外层容器 ::v-deep 组件 { }

2、dart-sass的样式穿透

Sass如果安装的是dart-sass，是不能使用 /deep/的，否则会提示错误：

SassError: expected selector. /deep/

dart-sass需要使用::v-deep。

ps:如果使用的是Vue3的话，sass和less都需要把 ::v-deep 替换成 :deep() 

3、stylus的样式穿透

如果用的是stylus，通过使用>>>改变组件样式

.wrapper >>> .swiper-pagination{
   background: #fff
}

4、css的样式穿透

如果你使用的是css，没有使用任何的css预处理器，则可以使用>>>，/deep/，::v-deep，这3种写法基本都是没问题的。

为了避免样式污染的问题，限制CSS样式的作用范围，我们都需要使用scoped属性。scoped属性下，改变组件的样式必须通过样式穿透来解决。

vue都是通过深度选择器来样式穿透的，几种样式穿透方式的简单总结如下:

css可以使用>>>，/deep/，::v-deep
less和node-sass可以使用/deep/，::v-deep
dart-sass可以使用::v-deep
stylus可以使用>>>

链接: https://www.fly63.com/article/detial/12375