美文网首页
style scoped

style scoped

作者: xiaowenSpring | 来源:发表于2018-04-24 17:13 被阅读0次

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块

scoped实现私有化样式的原理

vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的。
1、给HTML的DOM节点加一个不重复data属性(形如:data-v-3392b41d)来表示他的唯一性
2、在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-3392b41d)来私有化样式
3、如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性

缺点:一般组件和scoped组件的嵌套修改样式更复杂

相关文章

  • style scoped

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的...

  • style scoped

    在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的...

  • vue常见面试题

    基础题: 1.css只在当前组件起作用答:在style标签中写入scoped即可 例如: