scoped原理:
scoped:css样式只能用于当前vue组件。
scoped实现原理:通过postCss实现,给组件中所有的dom元素添加唯一的动态属性。给css选择器添加一个属性选择器。这样做是使样式只作用于该属性的dom元素。
scoped缺点:如果你子组件的根元素上有一个类已经在这个父组件中定义过了,那么这个父组件的样式就会泄露到子组件中。
scoped穿透:sass和less 使用 外层 /deep/ 第三方组件样式
stylus使用 外层 >>> 第三方组件样式
scoped穿透缺点:失去了组件的封装效果。这个组件内的所有的 .title 类的样式都会被这些样式所浸染—即便是孙节点。
使用scope和module的区别?
scoped样式可能会收到全局样式影响,
module样式不会受到全局样式影响。
scoped的效果是对元素加上data属性,但是可能会受到全局样式的影响。
module经过css-loader会对类名进行编译,添加上hash值等,所以无需担心和其他页面的同样的类名冲突,也可以避免全局样式被污染。
其实两种方案都非常简单、易用,在某种程度上解决的是同样的问题。 那么你该选择哪种呢?
scoped 样式的使用不需要额外的知识,给人舒适的感觉。它所存在的局限,也正是它的使用简单的原因。它可以用于支持小型到中型的应用。
在更大的应用或更复杂的场景中,这个时候,对于 CSS 的运用,我们就会希望它更加显式,拥有更多的控制权。虽然在模板中大量使用 $style 看起来并不那么“性感”,但却更加安全和灵活,为此我们只需付出微小的代价。
module好处:
它的第一点好处就是,当我们在 HMTL 中查看这个元素时我们可以立刻知道它所属的是哪个组件;第二点好处是,一切都变成显式的了,我们拥有了彻底的控制权——不会再有什么奇怪的现象了。
//scoped:
<style>//生成style样式
.button[data-v-f61kqi1] {color: red;}
</style><button class=”button” data-v-f61kqi1></button>
//module:
<template><button :class="$style.button" />
</template><style module>.button {color: red}
</style>
//生成html和style样式
<style>.ComponentName__button__2Kxy {color: red;}
</style><button class=”ComponentName__button__2Kxy”></button>