在vue组件中,不添加scoped,样式作用于全局,加了scoped样式仅针对当前组件。
如一个简单的样式:
<div>
<main>
<span>count: {{ count }}</span>
<div>这是一段文字</div>
</main>
<button @click="increment">增加</button>
<Hello />
</div>
div main div {
color: red;
}
添加了scoped
加了scoped之后,实际在浏览器中生成的样式是:
div main div[data-v-7a7a37b1] {
color: red;
}
并且该组件的元素都会添加一个 data-v-7a7a37b1 属性:
不添加scoped
不加scoped,则样式原样生成,并且组件的所有元素都没有添加 data-v-7a7a37b1。
data-v-7a7a37b1 中 7a7a37b1 是由vue生成的唯一hash值。
使用样式穿透
如果我们在scpoed样式中使用 :deep() ,最终生成的代码会将属性值前移,下面看几个示例。
示例一
div main :deep(div) {
color: red;
}
最终生成结果:
div main[data-v-7a7a37b1] div {
color: red;
}
示例二
div :deep(main) div {
color: red;
}
最终生成结果:
div[data-v-7a7a37b1] main div {
color: red;
}
示例三
div :deep(main div) {
color: red;
}
最终生成结果:
div[data-v-7a7a37b1] main div {
color: red;
}
示例四
:deep(div) main div {
color: red;
}
最终生成结果:
[data-v-7a7a37b1] div main div {
color: red;
}
通过上面的示例,再结合浏览器渲染css样式的规律,就能很好的理解最终页面呈现的效果。