vue中的css作⽤域、vue中的scoped坑点
⼀、css作⽤域
  之前⼀直很困扰css的作⽤域问题，即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class 使⽤css选择器保证css的作⽤域不会变成全局⽽被其它模块的css污染。
  在vue中引⼊了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地⽅的样式，使⽤了data-v-hash的⽅式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，⽅便很多。
  但是要注意scoped的作⽤域，因为权重的问题，如果是在⼦组件使⽤了scoped，那么在⽗组件中是不能直接修改⼦组件的样式的，需要在⽗组件中使⽤vue的深度作⽤选择器。
.parent >>> .children{ /* ... */ }
.parent /deep/ .children{ /* ... */ }
⼆、scoped坑点
  今天在覆盖iview组件样式的时候发现⼀个问题，就是⽆法覆盖组件原有的样式，最后在github的issue中到了答案：不要使
⽤scoped属性。于是我查了下关于scoped的⽂章。
  我们假设把这种组件叫做模块私有组件，其他的未加scoped的叫做模块⼀般组件。通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯⼀不重复的标记，以保证唯⼀，达到样式私有化模块化的⽬的。
//valChange.less(使⽤了嵌套规则)
#valueSlide{
.bigSlider .ivu-slider-wrap{
height: 6px;
}
.bigSlider .ivu-slider-bar {
css 属性选择器
height: 6px;
}
.bigSlider .ivu-slider-button{
width: 14px;
height: 14px;
}
}
//html部分
<style lang="less" scoped>
@import "./valChange.less";
</style>
<div class="valid-panel">
<div class="containerBox">
<div id="valueSlide" v-bind:>
<Slider ></Slider>
</div>
</div>
</div>
  也就是我们在style中使⽤scoped属性会出现下⾯的情况：
  HTML部分：
  CSS部分：
  从上⾯的字可以看出，添加了scoped属性的组件，为了达到组件样式模块化，做了两个处理：
给HTML的DOM节点加⼀个不重复data属性(形如：data-v-19fca230)来表⽰他的唯⼀性
在每句css选择器的末尾（编译后的⽣成的css语句）加⼀个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
  那么问题来了：对于当前组件下调⽤的其他组件，data属性只会添加到第⼀层HTML中：
  对于我们想覆盖的样式则⽆法起到作⽤：（在浏览器调试中⼿动添加 [data-v-19fca230] 属性后可以匹配）
  解决⽅案：
  不使⽤scoped属性，更多详细介绍可以参考
  总结⼀下scoped三条渲染规则：
  1、给HTML的DOM节点加⼀个不重复data属性(形如：data-v-19fca230)来表⽰他的唯⼀性
  2、在每句css选择器的末尾（编译后的⽣成的css语句）加⼀个当前组件的data属性选择器（如[data-v-19fca230]）来私有化样式
  3、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
  问题补充：
  1、如果不使⽤scoped，如何解决样式全局污染？
  推荐使⽤scoped推动组件私有化，⽂章所提到的不使⽤仅出现在已有UI库的样式覆盖上（当然⼈家
⽤了scoped 那就很难办了）。
  ⾸先，解决组件样式全局污染，也就是我们在这⾥不使⽤scoped 覆盖了样式，那么我们在其他地⽅调⽤该组件就会被覆盖。那么我们在使⽤组件的时候对组件给⼀个类名或者其他甄别属性（id），覆盖样式就针对该类名进⾏重写样式。
  其次，解决其他样式全局污染，如果我们通过：
<style lang="less">
@import "./test.less";
</style>
  引进样式，那么不使⽤scoped ，"./test.less" 中的其他类名样式可能会污染全局，我这⾥⽤⼀个⽐较笨的⽅法处理：在模板中使⽤两次<style></style> 标签：
<style lang="less" scoped>
@import "./test.less";
</style>
<style lang="less">
//你的覆盖样式
</style>
  这样既覆盖了样式，其他样式不会被覆盖到全局，感兴趣的同学可以⾃⼰试⼀试。（注意两个标签的顺序）。
  官⽹中提到每个vue模板中可以有多个<style></style>标签，所以上⾯的写法是没有问题的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。