基本意思就是,一个组件会被多个地方使用,但是有些地方可能需要的样式不太一样,比如一个地方需要红色背景,而另外一个地方可能需要蓝色背景,假设第一个地方已经是红色背景了,我想在第二个地方用时改成蓝色,这是如果直接通过全局修改样式则会影响到第一个的背景样式,但是我的本意并不是修改第一个地方的,而是只修改第二个地方的,这个时候就可以在第二个用到样式的前边添加上一个/deep/ 第一个的跟样式{} 在对象中修改颜色即可,比如
详细可参考此链接:掘金
scss 中使用方法:可以使用v-deep
~~~javascript
::v-deep .el-drawer__wrapper{ top: 176px; }
~~~
vue 中可以这样使用:
~~~html
<style lang="less" scoped> .jjw{ :deep .van-button--primary{ background-color: deeppink; } /deep/ .van-button--normal{ font-size: 24px; } } </style>
~~~
效果是一样的
需要注意的是同一个项目不同的.vue之间(写有scoped隔离的)也是可以使用deep的