/deep/   >>>   ::v-deep三个都是深度作用选择器

一般是由于出现scoped属性实现组件样式私有化,导致样式只出现在表层 无法深入渲染嵌套在内的盒子,因此需要外层盒子使用到深度作用选择器,来使外层盒子与内层样式保持一致

三者之间最大的用法区别是:

样式如果是sass/less 用>>>选择器无效 要选择/deep/ 或者 ::v-deep

而/deep/ 和 ::v-deep的区别是 vue2中使用::v-deep   vue3中使用/deep/

//举例1:vue2中去除element-table中表格使用固定列下方出现的一条线

.tabledata{//包裹eltable的父元素
      .el-table::before {
        height: 0;
      }
      ::v-deep.el-table__fixed-right::before {
        height: 0;
      }
}

//举例2:vue2中el-dialog里面的form-item改变间距

(最后的确认取消按钮也是一个el-form-item)

::v-deep.el-form-item:last-child {
    margin-top: 30px;
}//因为这个el组件是在Header组件里用到的 Header里的style写了scoped属性 所以要用到::v-deep

//举例3 直接不使用::v-deep /deep/ >>>

没写scoped的

style属性样式就可以影响到该组件及其子孙组件

 

 

Logo

前往低代码交流专区

更多推荐