vue实现局部样式
Vue 实现局部样式的方法
在 Vue 中实现局部样式（即样式仅作用于当前组件）可以通过以下几种方式实现：
使用 scoped 属性
在单文件组件（SFC）的 <style> 标签中添加 scoped 属性，Vue 会自动为组件内的元素添加唯一属性（如 data-v-f3f3eg9），并通过属性选择器限制样式作用域。
<template>
<div class="example">局部样式示例</div>
</template>
<style scoped>
.example {
color: red;
}
</style>CSS Modules
通过配置构建工具（如 webpack）启用 CSS Modules，在 <style> 标签中使用 module 属性。样式会编译为哈希类名，通过 $style 对象在模板中引用。
<template>
<div :class="$style.example">CSS Modules 示例</div>
</template>
<style module>
.example {
background: blue;
}
</style>深度选择器
在 scoped 样式中，使用 ::v-deep（或 /deep/、>>>，后者已废弃）穿透子组件样式。
<style scoped>
::v-deep .child-component {
padding: 10px;
}
</style>动态类名绑定
结合 Vue 的 :class 绑定动态类名，通过逻辑控制样式作用范围。
<template>
<div :class="{ active: isActive }">动态类名示例</div>
</template>
<script>
export default {
data() {
return { isActive: true };
}
};
</script>
<style>
.active {
font-weight: bold;
}
</style>组件命名空间
手动为组件内所有类名添加统一前缀，避免全局污染。
<style>
.my-component__title {
font-size: 16px;
}
</style>注意事项
scoped样式对动态插入的 DOM（如v-html）无效，需额外处理。- 第三方组件库的样式覆盖推荐使用深度选择器或全局样式文件。
- CSS Modules 适合需要高度隔离的复杂项目，但可能增加维护成本。
