vue组件的style标签里的scoped属性是什么作用?
<style lang="css" scoped> .container { color: red } </style>
开发一个项目会有多个css样式,全局的局部的,组件内的……各个组件之间可能会存在选择器重名的问题,一不小心可能会导致样式污染而使得项目的表现出现问题。而“scoped”这个属性就是为了使样式私有化,不至于让当前组件的css样式对全局造成污染。
scoped修饰的style只给当前组件的元素使用,是如何实现的呢?
原理是给渲染后的DOM元素增加一个唯一标志,类似于“data-v-123lsdfast23”,在css选择器上也有一个对应的相同标志,间接提升了样式的权重,使得样式更不容易被覆盖。
但是,这也会产生一些麻烦,scoped属性标志只能作用于DOM元素的最外层标签,所以父组件的样式不会渗透到子组件中去,可以使用scoped穿透来解决这个问题:
/* 写法一,container为外层属性选择器名称,没有也可以不加 */
.container /deep/ .button { color: red; }
/* 写法二,可用于stylus */
.container >>> .button { color: red; }
还学习到一种方案是将全局属性和局部属性分开处理,即:
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
另外,动态生成的DOM类名可能在scoped中也不会有作用,这时可添加 /deep/ 来让样式生效。