Vue: scoped 与 module 的使用

css 有一个特定，它是全局的。

这样的特性导致的结果是，一旦你在不同的地方定义了相同的 css 命名，那么它们的样式就会相互覆盖，最终导致的 style 错乱，从而影响整个网页布局。

在Vue中我们通过 Scoped 与 Module 来解决。接下来详细对 scoped 和 module 的使用进行说明：

scoped：

scoped 作用的阻止上层的css样式传递到下层，限制当前css作用域，使其只对当前组件生效。

添加了 scoped 的源码，标签上会增加 data-v-xxxxxxxx 的前缀，如图：

 

 scoped 的实现是借助了 PostCSS 实现的，一旦增加了 scoped，它会将之前覆盖的样式转换成下面的样式，如图：

 

 通过这种转换方式，间接的改变了原有的 css 命名。防止上层组件样式覆盖下层组件样式。

注意⚠️：scoped 还有一个特性，使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

module：

module 的用法也很简单，只要在 style 中增加 module 属性即可。不同之处是它在布局中的引用，都需要添加前缀 $style。因为通过 module 作用的 style 都被保存到 $style 对象中。如图：

代码如下

 

 检查元素：

 

 

 

 

 

 

 

 

参考： https://segmentfault.com/a/1190000018007851