浅谈vue中慎用style的scoped属性

在Vue框架中，使用style标签的时候，可以使用scoped属性，这个属性的作用是控制所写样式只作用于当前组件内部，不会污染其他组件的样式，防止样式冲突。但是在使用scoped属性时，有些细节需要注意。

不慎用scoped属性带来的问题

在使用scoped属性时，需要注意，这个属性只能控制当前组件内样式与其他组件的样式之间的影响，但是对于子组件中的样式或全局样式，会直接失效，从而造成一些潜在的问题。

举个例子：

<template>
  <div>
    <h1 class="title">{{ title }}</h1>
    <my-component></my-component>
  </div>
</template>

<style scoped>
.title {
  color: red;
}
</style>

在这个示例中，我们定义了一个组件，并在组件内部使用了style标签来添加样式，并使用了scoped属性限制了样式只作用于当前组件内部。然后在模板中，我们使用了一个标题h1标签，并给它添加了一个class名字叫做title，接着在组件内部，我们引用了另一个组件my-component。

假如my-component组件中也存在一个class名为title的样式：

<template>
  <div class="my-container">
    <h1 class="title">{{ title }}</h1>
  </div>
</template>

<style scoped>
.title {
  color: blue;
}
</style>

在这个示例中，我们可以看到，my-component组件中也定义了一个class名字叫做title的样式，它的颜色为蓝色。在这种情况不使用scoped属性，由于组件中存在两个名字相同的class样式，因此会造成样式冲突，这时可以使用scoped来限制当前组件内部的样式只作用于当前组件，而不会影响到其他组件的样式。

但是这里我们使用了scoped属性后的结果就大不一样了。因为父组件中的.title样式只作用于父组件内部，而不会影响到子组件，所以子组件中的.title样式仍然会被全局样式或其他组件中的.title样式所影响。

则最终渲染出来的效果就是父组件中的.title样式被应用，而子组件中的.title样式被忽略。

如何解决样式冲突问题

解决样式冲突问题的方法有三种，分别是：

1.使用深度选择器

使用深度选择器是一种比较常见的解决样式冲突的方式。在样式前面添加 /deep/ 或者 >>>，表示这个样式的作用范围不仅仅是当前组件，还包括子组件。

修复前面的示例代码：

<style scoped>
.title {
  color: red;
}

/deep/ .title {
  color: blue;
}
</style>

2.使用module属性

module属性是Vue提供的另一种样式隔离的方案，其原理就是利用Webpack提供的模块机制，将每个组件的样式打包成一个独立的模块，并且在模块中添加一个随机的唯一标识符，以达到样式隔离的效果。使用module属性的样式不需要使用scoped属性。只需要在引入组件时，添加.module后缀，在CSS中使用模块化类即可。

<template>
  <div>
    <h1 class="title">{{ title }}</h1>
    <my-component></my-component>
  </div>
</template>

<style module>
.title {
  color: red;
}
</style>

<template>
  <div class="my-container">
    <h1 class="my-component-title">{{ title }}</h1>
  </div>
</template>

<style module>
.my-component-title {
  color: blue;
}
</style>

可以看到，在这个示例中，我们使用了module属性来限制当前组件内的样式，用法与scoped属性差不多，只不过需要在类名后面添加.module后缀，并且在模板中使用的类名也需要使用模块化的类名。