在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性,对于这个 scoped 属性的了解做一下介绍。
1、作用
当 style 标签里面有 scoped 属性时,它的css只作用于当前组件中的元素。在单页面项目中可以使组件之间互不污染,实现模块化。
2、原理
通过使用postCss来实现转换,给dom增加一个动态属性,然后css属性也额外添加对应的属性来选择该dom,达到该样式只作用于含有该属性的dom,实现组件样式的模块化。
转换前:
<templete>
<div class='test'>hillo!</div>
</templete>
<style scoped>
.test{
color:red;}
</style>
转换后:
<templete>
<div class='test' data-v-4f795181>hillo!</div>
</templete>
<style scoped>
.test[data-v-4f795181]{
color:red;}
</style>
转换后的代码可以通过浏览器的控制台检查元素来查看。
3、如何修改有 scoped 属性的样式
我们的项目经常使用第三方组件库,例如 ElementUI;它的样式都用到了 scoped 属性。如果我们需要改变部分页面 ElementUI 的样式我们需要穿透 scoped,一般使用深度选择器 /deep/ 或者 ‘>>>’ 来穿透属性。
修改第三方插件样式:
<style scoped>
.test /deep/ .el-menu-item {
color:red; }
</style>
//或者
<style scoped>
.test >>> .el-menu-item {
color:red; }
</style>
如果 /deep/ 报错或者不生效,使用 ::v-deep