面试题：怎么使 CSS 样式只在当前 Vue 组件中生效？

在 Vue 中，可以通过以下方式使 CSS 样式只在当前组件中生效，避免样式污染全局作用域：

1. 使用 `<style scoped>`

作用：scoped 属性可以使样式只作用于当前组件的模板。

示例：

<template>
  <div class="my-component">
    <p>这是一个组件</p>
  </div>
</template>

<style scoped>
.my-component {
  color: red;
}
p {
  font-size: 16px;
}
</style>

原理：
- Vue 会为当前组件的元素添加一个唯一的属性（如 data-v-f3f3eg9），并将样式规则转换为带有该属性的选择器。
- 例如，上述代码会被转换为：
```
.my-component[data-v-f3f3eg9] {
  color: red;
}
p[data-v-f3f3eg9] {
  font-size: 16px;
}
```
注意事项：
- scoped 样式不会影响子组件的根元素。
- 如果需要影响子组件的样式，可以使用深度选择器 >>> 或 /deep/。

2. 深度选择器

作用：在 scoped 样式中，使用深度选择器可以影响子组件的样式。

示例：

<style scoped>
.my-component >>> .child-class {
  color: blue;
}
</style>

或（在 Sass/SCSS 中）：

<style scoped lang="scss">
.my-component /deep/ .child-class {
  color: blue;
}
</style>

应用场景：当需要修改子组件的样式时使用。

3. CSS Modules

作用：将 CSS 类名局部化，避免全局冲突。
使用方法：
1. 在 <style> 标签中添加 module 属性。
2. 在模板中通过 $style 对象引用类名。

示例：

<template>
  <div :class="$style.myComponent">
    <p :class="$style.text">这是一个组件</p>
  </div>
</template>

<style module>
.myComponent {
  color: red;
}
.text {
  font-size: 16px;
}
</style>

原理：
- Vue 会为每个类名生成一个唯一的哈希值，确保类名只在当前组件中生效。
- 例如，.myComponent 可能会被转换为 ._1y3f4g。
优点：
- 完全避免样式冲突。
- 支持动态类名绑定。

4. `<style>` 标签的 `module` 属性

作用：与 CSS Modules 类似，但可以自定义模块名。

示例：

<template>
  <div :class="styles.myComponent">
    <p :class="styles.text">这是一个组件</p>
  </div>
</template>

<style module="styles">
.myComponent {
  color: red;
}
.text {
  font-size: 16px;
}
</style>

应用场景：当需要为 CSS Modules 指定自定义模块名时使用。

5. BEM 命名规范

作用：通过命名规范避免样式冲突。

示例：

<template>
  <div class="my-component">
    <p class="my-component__text">这是一个组件</p>
  </div>
</template>

<style>
.my-component {
  color: red;
}
.my-component__text {
  font-size: 16px;
}
</style>

优点：
- 不依赖 Vue 的特性，适用于任何框架。
- 通过命名规范避免冲突。

6. 动态类名绑定

作用：通过动态类名绑定实现样式隔离。

示例：

<template>
  <div :class="componentClass">
    <p :class="textClass">这是一个组件</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentClass: 'my-component',
      textClass: 'my-component-text'
    };
  }
};
</script>

<style>
.my-component {
  color: red;
}
.my-component-text {
  font-size: 16px;
}
</style>