Vue 中如何让 CSS 只在当前组件中起作用？

在 Vue 中，可以使用一些技术来确保 CSS 只在当前组件中起作用，而不影响其他组件的样式。

1. Scoped CSS（作用域样式）：

   • Vue 提供了 <style scoped> 的语法，可以让 CSS 样式仅在当前组件中生效。这样做的原理是 Vue 会自动生成一个唯一的哈希值，将这个哈希值作为类名的一部分，从而确保样式只在当前组件的 DOM 元素上生效。

   示例：

   <template>
     <div class="container">
       <h1>Scoped CSS Example</h1>
     </div>
   </template>
   
   <script>
   export default {
     // ...组件逻辑
   };
   </script>
   
   <style scoped>
   .container {
     background-color: lightblue;
     padding: 20px;
   }
   
   h1 {
     color: blue;
   }
   </style>
   

   在这个例子中，.container 类的样式和 h1 标签的样式只会在当前组件中生效，不会泄露到其他组件中。

2. CSS Modules：

   • 使用 CSS Modules 也是另一种控制样式作用域的方式。通过 Vue CLI 创建的项目可以直接在 <style> 标签中使用 CSS Modules，它会自动将 CSS 样式限制在当前组件的范围内，避免样式污染。

   示例：

   <template>
     <div class="container">
       <h1>CSS Modules Example</h1>
     </div>
   </template>
   
   <script>
   // 导入 CSS 模块
   import styles from './YourComponent.module.css';
   
   export default {
     // ...组件逻辑
   };
   </script>
   
   <style module>
   /* 使用 CSS Modules */
   .container {
     /* 引用 CSS 模块 */
     composes: container from './YourComponent.module.css';
   }
   
   h1 {
     /* 引用 CSS 模块 */
     composes: heading from './YourComponent.module.css';
   }
   </style>
   

这些方法可以确保 CSS 样式只在当前组件内起作用，避免全局污染和样式冲突，提高组件化开发的灵活性和可维护性。