vue 中的 scoped 通过在 DOM 结构以及 css 样式上加唯一不重复的标记:data-v-hash 的方式,以保证唯一(通过 PostCSS 转译),达到样式私有模块化的目的。
scoped 的 3 条渲染规则:
① 给 HTML 的 DOM 节点加一个不重复的 data 属性,来表示它的唯一性;
② 在每句 css 选择器末尾(编译后的生成的 css 语句)加一个当前组件的 data 属性选择器来私有化样式;
③ 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的 data 属性。
在做项目中,会遇到这么一个问题,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。那么有哪些解决办法呢?
①不使用scopeds省略(不推荐)
② 在模板中使用两次style标签
在vue组件中使用两个style标签,一个加上scoped属性,一个不加scoped属性,把需要覆盖的css样式写在不加scoped属性的style标签里建立一个reset.css(基础全局样式)文件,里面写覆盖的css样式,在入口文件main.js 中引入
③scoped穿透:/deep/, >>>
.wrapper /deep/ .swiper-pagination-bullet-active
.wrapper >>> .swiper-pagination-bullet-active
转译前的代码:
<style scoped>
.example{
color:red;
}
</style>
<template>
<div>scoped测试案例</div>
</template>
转译后:
.example[data-v-5558831a] {
color: red;
}
<template>
<div class="example" data-v-5558831a>scoped测试案例</div>
</template>
PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,给css选择器额外添加一个对应的属性选择器,来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。