目录

一、概述

二、私有化原理

三、深度作用选择器

四、总结

一、概述

scoped是vue中引入的概念，其设计思想是将组件样式私有化，避免对全局样式造成污染。

scoped是vue组件中style标签的一个特殊属性，通过data-v-hash的方式为组件样式添加模块标识，利用模块标识实现组件样式的私有化。

二、私有化原理

基本概念

scoped属性会为当前组件预设一个data-v-hash属性选择器，编译代码时，dom节点和CSS选择器会自动追加预设的data属性选择器，以达到样式私有化的目的。

<!--转义前-->
<template><div class="demo"></div>
</template>
<style lang="less" scoped>.demo{color:red;}
</style>

<!--转义后-->
<template><div class="demo" data-v-5558831a></div>
</template>
<style lang="less" scoped>.demo[data-v-5558831a]{color:red;}
</style>

拓展1

若组件设置了scoped属性，且其内部包含子组件，编译时，只会给子组件内部最外层的标签追加预设的data属性选择器。

<!--父组件-->
<template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App" /></div>
</template>
<style lang="scss" scoped>
</style>

<!--子组件-->
<template><div class="hello"><h1>{{ msg }}</h1><p>2020年5月25日</p></div>
</template>
<style></style>

拓展2

在拓展1的基础上，为其中的子组件设置scoped属性，则子组件最外层标签同时追加父组件预设的data属性选择器和子组件预设的data属性选择器。

<!--子组件-->
<template><div class="hello"><h1>{{ msg }}</h1><p>2020年5月25日</p></div>
</template>
<style></style>

三、深度作用选择器

scoped属性能实现组件样式的私有化。如果父组件设置了scoped，则其样式会自动追加父组件预设的data属性选择器，以实现其样式私有化，此时，子组件除了最外层标签外的其它标签不受父组件样式影响。

<!--父组件-->
<template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App" /></div>
</template>
<style lang="scss" scoped>
h1{color: #fff;
}
</style>

<!--子组件-->
<template><div class="hello"><h1>{{ msg }}</h1><p>2020年5月25日</p></div>
</template>
<style></style>

如果父组件设置了scoped属性，且想修改子组件中的样式，可以在父组件中使用深度作用选择器/deep/。注意，子组件是否设置scoped属性没有任何影响。

<!--父组件-->
<template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App" /></div>
</template>
<style lang="scss" scoped>
/deep/ h1{color: #fff;
}
</style>

如上所属，深度作用选择器的作用是穿透scoped的样式封锁。

备注：sass和less的深度作用选择器是/deep/，stylus的的深度作用选择器用>>>。

四、总结

scoped属性用来实现组件样式的私有化，一般不能省略，否则会造成样式污染。比如父子组件，子组件若没有scoped属性，其设置的样式也会影响到父组件。如果有的样式确定需要覆盖到其它组件，可以在vue组件中创建两个style标签，一个设置scoped属性，用来定义私有样式，一个不设置scoped属性，用来定义公用的样式。

<style lang="less" scoped><!-- 私有样式 -->
</style>
<style lang="less"><!-- 可以覆盖其它组件的样式 -->
</style>