标签：一切 样式 deep 关于 scoped 组件 css 属性
1.首先要知道v-deep的使用场合。
在此之前先了解一下scoped属性，scoped 属性是一个布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。
也就是说当我们在style中使用scoped属性会出现下面的情况：
html部分
css部分
包含其他子组件的时候
从上面的字可以看出，添加了scoped属性的组件，为了达到组件样式模块化，做了如下处理：
-
给HTML的DOM节点加一个不重复
data属性(形如：data-v-19fca230)来表示他的唯一性 -
在每个css选择器的末尾（编译后的生成的css语句）加一个当前组件的
data属性选择器（如[data-v-2311c06a]）来私有化样式 -
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性，此时，在scoped里面定义的子组件的css样式将不会生效，但是如果把scoped去掉，那么就可以生效了，但是这也会造成全局样式污染的问题。
综上：使用 scoped 后，父组件的样式将不会渗透到子组件中。
为了修改子组件的样式，同时避免样式污染的问题采用如下的方法解决：
（1）写两个style标签，其中一个去掉scoped属性，并给对应的子组件添加一个类名举例如下：
<style lang="less" scoped> //无需覆盖的样式代码 </style> <style lang="less"> //你覆盖的子组件样式 </style>
这样既覆盖了样式，其他样式不会被覆盖到全局（注意两个标签的顺序）。
（2）样式穿透
我们使用了/deep/深度作用选择器，这样我们就可以把样式写在scoped里，保证避免了全局样式污染，又可以实现修改子组件默认样式的需求。
如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改 例如： .a >>> .b {}
如果在项目中用到了预处理器 scss 、sass、less 。这个时候用::v-deep。 例如： v-deep .a {}
2.这就是我们常用的v-deep的由来，但是使用时需要注意：
虽然在scoped作用域下，使用v-deep修改子组件的样式不会造成全局污染，但是例如：
::v-deep .el-input {}
::v-deep .el-select {}
::v-deep .el-tree {}等等，这样的写法会将同一个文件中所有叫这个类名的组件样式都修改，假如该文件中同样包含wic或者RDC的input，select，tree组件,则会造成样式的污染。所以不要直接这样写，应该添加一个我们自己的类，例如：
.teslib-box {
::v-deep .el-input {
//样式
}
}3.拓展：对于一下两种方式的v-deep哪种更好
（1）
.query-testcase {
::v-deep .el-input {
//样式
}
}（2）
::v-deep .query-testcase {
.el-input {
//样式
}
}假如对于一个query.vue文件
我们使用v-deep当然是想改queryTestCase组件里面的某个东西的样式，假如采用第一种，那么它只会从叫query-testcase的类里面去找，也就是比较精确的定位到我们需要的组件。
假如采用第二种，我们知道使用v-deep会进行样式的穿透，那么它会将当前的query.vue文件整体去找叫query-testcase的类，假如在QueryDirectory组件或者Toolbar组件里面也有这个类
就会被定位到，从而多修改了一下样式。
综上：使用（2）这种方式会增大v-deep的作用域，我们改css最忌讳的就是篡改了其他未知的样式，因此我们尽量缩小自己css的作用域，
因此采用（1）这个写法去使用v-deep。
标签：一切,样式,deep,关于,scoped,组件,css,属性 来源： https://www.cnblogs.com/131362wsc/p/16460652.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。