在vue中,scoped设计的初衷就是让样式变得私有,让它不会影响其他任何地方的样式。
我们先从实现模块组件的原理说起。通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的。具体的渲染结果是怎样的,通过例子来说明。这里为了方便称呼,我们假设把“加了scoped的组件”叫做“样式私有组件”;把“未加scoped的”叫做“一般组件”。
(1)一个公共组件v-button,为了样式模块化,给其加上scoped属性。
// v-button.vue
<template>
<div class="button-warp">
<button class="button">text</button>
</div>
</template>
...
<style scoped>
.button-warp {
display:inline-block;
}
.button {
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
</style>
v-button组件在浏览器渲染出的html部分和css部分分别为:
<div data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
.button-warp[data-v-2311c06a] {
display:inline-block;
}
.button[data-v-2311c06a] {
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
从上面的字可以看出,添加了scoped属性的组件,为了达到组件样式模块化,做了两个处理:
给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性;
在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式。
大家都知道css样式有一个优先级的说法,scoped的这一操作然达到了组件样式模块化的目的,造成一种结果是其中每个样式的权重加重了,因此,理论上我们要去修改这个样式,需要更高的权重去覆盖这个样式。这是增加复杂度的一个维度。
(2)“一般组件”引用“样式私有组件”v-button呢?
//content.vue
<template>
<div class="content">
<p class="title"></p>
<!-- v-button假设是上面定义的组件 -->
<v-button></v-button>
</div>
</template>
...
<style>
.content {
width: 1200px;
margin: 0 auto;
}
.content .button {
border-raduis: 5px;
}
</style>
此时,content.vue的style上没有加scoped属性,那么渲染出来html和css分别就是:
<div class="content">
<p class="title"></p>
<!-- v-button假设是上面定义的组件 -->
<div data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
</div>
/* button.vue渲染出来的css */
.button-warp[data-v-2311c06a] {
display:inline-block;
}
.button[data-v-2311c06a] {
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
/* content.vue渲染出来的css */
.content {
width: 1200px;
margin: 0 auto;
}
.content .button {
border-raduis: 5px;
}
可以看出,虽然在content组件中,修改了button的border-raduis属性,但是由于权重关系,生效的依然是组件内部的样式(此时是外部的样式被覆盖)。所以如果要达到修改样式的目的,就必须加重我们要修改样式的权重(增加选择器层级、ID选择器、并列选择器、impotant等)。
(3)“样式私有组件”引用“样式私有组件”v-button呢?
如果在content.vue的style上加了scoped属性呢?按照开始分析出来的规则(事实也是这样的),首先是在所有的DOM节点加上data属性,然后在css选择器尾部加上data属性选择器。那么渲染出来html和css分别就是:
<div data-v-57bc25a0 class="content">
<p data-v-57bc25a0 class="title"></p>
<!-- v-button假设是上面定义的组件 -->
<div data-v-57bc25a0 data-v-2311c06a class="button-warp">
<button data-v-2311c06a class="button">text</button>
</div>
</div>
/* button.vue渲染出来的css */
.button-warp[data-v-2311c06a] {
display:inline-block;
}
.button[data-v-2311c06a] {
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
/* content.vue渲染出来的css */
.content[data-v-57bc25a0] {
width: 1200px;
margin: 0 auto;
}
.content .button[data-v-57bc25a0] {
border-raduis: 5px;
}
对于上面的(2)和(3)这两种情况,可以明显看出来渲染后的结果大不相同。
在第(3)情况中,虽然我们在content添加了想要修改button组件的样式的代码,但是仔细看,由于 ".content .button" 这句在末尾加的是content组件的scoped标记,最后这句其实根本作用不到我们想要的DOM节点上,所以第(3)情况我们在content内部写的任何样式都依然不会影响到button.vue组件。
总结scoped的渲染规则有三条:
给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性;
在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式;
如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性。
参考文章:vue中慎用style的scoped属性 。