Vue中scoped的原理与scoped使用
scoped作用与功能
实现组件的私有化,不对全局造成样式污染,表示当前style的属性样式只属于当前模块。
这个方法很方便,但网上很多人表示这个也会对我们使用公共组件造成很多困难,我们需要先从scoped实现原理开始了解
问题发现:
由于出现了在父页面使用style
中和子组件中定义了一样的class
发现渲染出的页面很奇怪,并没有按照自己在<style>
中定义的css进行表现。最终发现了vue会有全局样式污染这一点。最终通过学习了scoped
实现了组件样式的私有化
实现原理:
通过观察DOM结构发现:vue通过在DOM结构上的css样式加上了唯一地标志,保证了唯一,达到样式私有化,不污染全局的作用
[学习]慎用愿意:
只是在设置
scoped
属性的组件上的所有标签添加一的data
开头的属性,且在标签选择器的结尾加上和属性同样的字段,起到唯一性的作用,但是这样如果组件中也引用其他组建就会出现类似下面的问题:
- 在父组件无
scoped
,子组件有scoped
,父组件是无法操作子组件样式的 - 父组件有
scoped
,子组件没有时,父组件也无法设置子组件的样式,父组件所有标签都会带有data-x-xxxxx
唯一标志,单子组件不会带有 - 父子组件都有,同样无法设置样式,更改起来会增加代码量
参考学习博客: