/deep/ >>> ::v-deep的用法

/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属性样式就可以影响到该组件及其子孙组件

 

 

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值