vue的scoped和module的区别

一，scoped 用法。

1，使用原理。

采用 postcss 的相似的方式。在 scoped 规定区域内的样式。渲染后给元素加上属性，并将选择器变成属性选择器。这样就限定了范围。防止形成全局样式。
eg:

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

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

渲染后

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

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

2，缺点，

无法修改子组件、第三方组件、v-html 创建的 DOM、的样式，

3，解决方案。

1), 通过穿透 scoped，使用深度选择器，例如 ’>>>’。
2), 另外用一个普通不含 scoped 的 style 标签。在里面书写样式。
总结：上面不管是那种方式都是违背 scoped 的原则。都会形成全局样式。所以使用 scoped 的一般是中小型项目。

二, 模块式样式

1，使用原理

将 module 的里面的样式都保存在 $style 对象中，渲染后选择器会加上该组件所在文件的文件名作为前缀；由于是个对象所以也同事能将样式导出供其他页面使用。

2，基本例子：

<template>
  <div :class="$style.content">
    <div :class="$style['title-wrap']"> 我是红色的 </div>
    <green-title></green-title>
  </div>
</template>
 
<style lang="scss" module>
.content {
  .title-wrap {
    font-size: 20px;
    color: red;
  }
}
</style>

渲染后

3，导出使用

<template>
  <div :class="$style.content">
    <div :class="$style['title-wrap']"> 我是红色的 </div>
    <green-title :styleTitle="$style['title-wrap']"></green-title>
  </div>
</template>

<template>
  <div class="content">
    <div :class="styleTitle"> 我是绿色的 </div>
  </div>
</template>
<script>
 
export default {
  props: {styleTitle: String,},
}
</script>

3，结论

根据渲染前后变化其实也是就形成一个特殊的模块化的命名方式。来形成全局样式，只是由于加上选择器前缀比较显得跟私有化些，一般难以重名而已。
4，