深度作用选择器--样式穿透

vue 深度作用选择器 >>> 与 /deep/(sass/less)

/deep/ 后改为 ::v-deep

遇到的问题

vue 组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局，但如果你引用了第三方组件： 默认只会对组件的最外层（div）加入这个 [data-v-xxxx] 属性，但第二层开始就没有效果了。

1. 解决方法一 将 scoped 移除，或者新建一个没有 scoped 的 style（一个.vue文件允许多个style）
2. 解决方法二 深度作用选择器 >>> 或 ::v-deep “»>“只作用于css

1
2
3

.fuck >>> .weui-cells {
    // ...
}

sass/scss/less 使用 ::v-deep

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style lang="scss" scoped>
.select {
  width: 100px;

  /deep/ .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>

使用场景

vue 组件中，在 style 设置为 scoped 时候，对子组件是不生效的.这时可以使用 /deep/ 深度选择器。 一般使用场景有2个.

1. 是嵌套了子组件的父组件 <style> 上
2. 是UI组件的节点样式修改上,如swiper组件的轮播分页原点样式上. 需要注意的是:/deep/ 效果对其下所有子组件的样式都生效,不需在里面嵌套使用.不然还会不生效.

1
2
3
4
5
6

 /deep/ .swiper-pagination-bullet-active{
  background:#fff;
  .test{
      /*这里也生效哦*/
  }
}

深度作用选择器总结

如果希望scope样式中的一个选择器作用的“更深”，例如影响子组件，可以使用 »> 操作符，预处理器scss无法解析，使用::v-deep