Vue中style的scoped属性以及穿透方法

一、scoped基础知识

1.1 scoped用法

<style scoped>
  .pagination-container {
    background: #fff;
    padding: 32px 16px;
  }
  .pagination-container.hidden {
    display: none;
  }
</style>

1.2 scoped作用

当style标签里面有scoped属性时，它的css只作用于当前组建的元素。在单页面项目中可以使组件之间互不污染，实现模块化（实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块）。

1.3 实现原理

style 标签中添加 scoped 属性后，vue 就会为当前组件中的 DOM 元素添加唯一的一个自定义属性（唯一性的标记）【data-v-xxx】,即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到样式私有化，不污染全局的作用。

1.4 建议

实际开发中，建议在每个组件的 style 身上都加上 scoped 属性。

二、深度选择器-样式穿透

2.1 为什么需要穿透scoped

• 在给当前组件的 style 添加了 scoped 属性后，如果想在父组件中修改子组件的样式 ，就需要使用深度选择器 。

• 引用了第三方组件后，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

2.2 样式穿透的方法

样式穿透的写法有三种：
>>>、/deep/、::v-deep

2.2.1 >>>

如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改

div >>> .cla {
    color: red;
}

2.2.2 /deep/ ::v-deep

项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 ，可以使用 /deep/。

注意：vue-cli3以上版本不可以

div /deep/ .cla {
    color: red;
}

div ::v-deep .cla {
    color: red;
}

转载自:Vue中style的scoped属性以及穿透方法