vue——样式穿透(深度选择器)/deep/ >>> ::v-deep 三者的区别

在项目中为了避免页面间样式污染常用scoped组件私有化，如果要改变element-ui的样式时需要用样式穿透才可复写样式。

/deep/

1 //在vue3.0之前可使用，例如(复写样式前加/deep/)，vue3.0及后使用就会报错
2 
3 /deep/ .el-input {
4     width: 60px;
5 }

::v-deep

1 //在vue3.0及后使用，替代/deep/
2 
3 ::v-deep .el-input {
4     width: 60px;
5 }

>>>       

1 /*
2  　　只作用于css，对于less和scss不起作用，如果是less和scss的话需要用到/deep/或::v-deep
3 */
4 
5 >>> .el-input{
6       height:100px;      
7 }

其他解决方式

1 //将 scoped 移除，或者新建一个没有 scoped 的 style（一个.vue文件允许多个style）
2 
3