关注性能小课，成长不止一点点
做前端页面开发中，样式的修改是最大的难点之一，特别是针对我们这些测试，前端基础不太扎实的同学，今天我们来说说使用vue.js 开发过程中，「怎样修改子组件的样式，又不会污染全局」。
1.什么是 scoped
在「Vue」文件中的「style」标签上有一个特殊的属性，「scoped」。当一个「style」标签拥有「scoped」属性时候，它的「css」样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有「style」标签都加上了「scoped」属性，相当于实现了样式的模块化。
但如果在「vue」的开发中，我们需要引用子组件，包括ui组件（「ElementUI、iview」）。但是在父组件中添加「scoped」之后，在父组件中书写子组件的样式是无效果的。去掉scoped之后，样式可以覆盖。但这样会污染全局样式，我们该怎么解决呢？
2.修改方法
方法一 混用本地和全局样式
在一个组件内同时使用 「scoped」 和非「scoped」的样式
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
方法二 深度作用选择器
深度作用选择器 「（>>> ，/deep/）」如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 「>>>」 操作符：
<style lang="css" scoped>
.a >>> .b { /* ... */ }
</style>
或者
<style lang="css" scoped>
.a /deep/ .b { /* ... */ }
</style>
某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。
示例
我们想要修改「ElementUI」 组件按钮的背景色，「style」中有「scoped」情况下，直接修改class是无效的，只能通过深度作用选择器或者混用本地和全局样式。
-
修改后效果
<template>
<div class="vue">
<el-button type='success'>查询</el-button>
</div>
</template>
<style scoped>
.vue >>> .el-button--success {
background-color: red;
}
</style>
END
欢迎加入我们：
扫码加入公开课学习交流群②
已在公开课学习交流群①
的小朋友请勿重复加群
免费技术支持微信：15712862196
咨询QQ：2657535456
咨询微信号：huice666
慧测公众号
