How to correctly use " scoped " styles in VueJS single file components?

在VueJS中，单文件组件（Single File Components，简称SFC）允许开发者在同一个文件中书写模板、脚本和样式。使用“scoped”样式是一种在Vue组件中封装和限定CSS作用范围的方法，它可以确保组件的样式不会影响到其他组件的样式。

使用“scoped”样式的步骤：

在<style>标签中添加scoped属性：在单文件组件的<style>标签中添加scoped属性可以确保CSS样式只应用于当前组件。VueJS在编译时，会自动为组件的元素和CSS规则添加一个独特的属性，如data-v-f3f3eg9，从而确保样式的隔离。
```
vue
<template>
  <button class="my-button">Click me</button>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
.my-button {
  background-color: blue;
  color: white;
}
</style>
```
理解“scoped”样式的限制：使用scoped属性时，样式会被限制在当前组件内。这意味着子组件不会继承这些样式。如果需要在子组件中应用父组件的样式，可以使用深度选择器（>>> 或 /deep/）来穿透作用域。
```
vue
<style scoped>
.my-button >>> .icon {
  color: red;
}
</style>
```
合理利用CSS模块：如果需要更灵活的样式封装和复用，可以考虑使用CSS Modules，它允许将CSS类视为模块导入到JavaScript中。在CSS模块中，每个类名默认是局部作用域的，但可以通过导出和导入来在组件间共享。
```
vue
<style module>
.button {
  background-color: green;
}
</style>

<template>
  <button :class="$style.button">Click me</button>
</template>
```

示例与实际应用：

假设我们正在开发一个用户界面库，其中包含一个按钮组件。我们希望按钮的样式独立于应用中的其他组件，以避免样式冲突。通过在<style>标签中添加scoped，我们可以确保该按钮的样式只应用于它自己：

vue
<template>
  <button class="unique-button">Unique Button</button>
</template>

<style scoped>
.unique-button {
  background-color: coral;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

在这个例子中，.unique-button类的样式仅应用于当前组件，不会影响到其他含有同名类的组件。

总结，使用“scoped”样式可以有效地帮助我们维护组件样式的独立性和清晰度，适合用于那些需要确保样式封闭性的场景。在设计组件库或大型项目时，这一技术是非常有用的。

2024年8月9日 10:00 回复

1个答案

使用“scoped”样式的步骤：

示例与实际应用：

你的答案