Vue-style中的scope属性

scope出现的原因:

• 在组件的style中, 可以使用scope属性, 限制当前的样式只作用于当前的组件.

实现原理:

• 使用这个属性后,

  Scoped Vue CSS被postcss工具构建成.{className}[data-v-{componentHash}]这样的属性, 然后这个componentHash值将作用于当前组件的所有元素.

• 但是, 这样又有一个问题, 引用的组件内的样式就无法修改了. 所以, 可以有两种方式对带有scope的组件样式进行修改(样式穿透):

  1. .container /deep/ .box{} 通过 /deep/ 对外层的父亲和当前需要修改的类上进行修改
  2. .container >>> .box {} 通过 >>> 符号, 对最外层到当前需要修改的类, 进行修改

• PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

其他解决方法:

1. scop 如果对其他组件进行样式的修改, 需要使用 >>>或者/deep/ , 但是, 穿透方法实际上违反了scoped属性的意义.
2. 还有一种方法, 可以给每一个类, 都带上当前组件的类名, 使用组合类的方式. 比如, 用户组件中使用 .user .container .box, 书这个组件使用 .books .container .box 的方式, 来定义样式. 缺点就是需要写的东西变多了. 这也违背了这些less、sass等CSS工具出现的意义.

总结:

• 所有的技术和工具都是为了开发的方便和快捷高效. 所以, 在使用的时候, 看自己和团队使用习惯或者需求要求.本人使用较多的是scope属性, 纯属懒.