vue的scoped探究

在写vue组件的时候，style可以添加scoped属性，这属性到底干了哪些事情，会有哪些作用和影响呢？

1. 在style标签上添加scoped属性，这张样式表被编译之后，其生成的样式class会添加一个hash值（实际上是一个属性选择器）

如：

.v-customer{

color:red;

}

编译后成为：

.v-customer[data-v-123456] {

color:red;

}

2. 同时，组件渲染出来的html标签，如果用过这张样式表里的class，则会添加一个相同hash值的原生data-*标签属性（attribute）

如：<span data-v-123456 class="v-customer">xxx</span>

 

当样式有多级嵌套，hash值只会加在最底层的class上

如：

.v-customer {

color:red;

._ccc {

color:red;

}

}

编译后:

.v-customer[data-v-123456] {

color:red;

}

.v-customer ._ccc[data-v-123456] {

color:red

}

 

3. 带hash值的样式只对有着相同的hash值的html标签生效

 

4.每个组件（类）都有唯一的hash值，一个组件的多个实例有着相同的hash值

 

5. 这种带hash值的样式，其优先级会比相同的、不带hash值的样式要高,其实是相当于增加了一层属性选择器的权重

css优先级关系：内联样式 > ID 选择器 > 类选择器>属性选择器 > 伪类选择器 > 标签选择器 >伪元素选择器

如：

<style scpoed>

.v-customer {

._ccc {

color:red;

}

}

</style>

 

<style >

.v-customer {

div {

._ccc {

color:red;

}

}

 

}

</style>

这样编译出来的样式为

.v-customer ._ccc[data-v-123456] {

color:red

}

.v-customer div ._ccc{

color:red

}

从权重可以看出属性选择器的权重高于标签选择器，因此，上面的样式的优先级会更高

 

又如：

<style scpoed>

.v-customer {

._ccc {

color:red;

}

}

</style>

 

<style >

.v-customer {

.cus {

._ccc {

color:red;

}

}

 

}

</style>

从权重可以看出类选择器的权重高于属性选择器，因此，下面的样式的优先级会更高

 

总结

1 . scoped的组件样式并不是不可覆盖的，只要外面的样式优先级足够，还是可以覆盖的

2. scoped的样式只对当前组件生效，因此不会污染其他组件和子组件

3.scoped 的style里的样式如果想让他成为不带hash的样式以便子组件使用，可以使用 /deep/，这会使编译产生的class不带hash

如 ：

<style scpoed>

.v-customer {

/deep/ ._ccc {

color:red;

}

}

</style>

编译之后为：

.v-customer ._ccc {

color:red;

}

被/deep/ 修饰过的class及其子class都不会被加上hash