[08][创新实训记录]Vue中scoped的原理与scoped使用

Vue中scoped的原理与scoped使用

scoped作用与功能

实现组件的私有化，不对全局造成样式污染，表示当前style的属性样式只属于当前模块。

这个方法很方便，但网上很多人表示这个也会对我们使用公共组件造成很多困难，我们需要先从scoped实现原理开始了解

---

问题发现：

由于出现了在父页面使用style中和子组件中定义了一样的class发现渲染出的页面很奇怪，并没有按照自己在<style>中定义的css进行表现。最终发现了vue会有全局样式污染这一点。最终通过学习了scoped实现了组件样式的私有化

实现原理：

通过观察DOM结构发现：vue通过在DOM结构上的css样式加上了唯一地标志，保证了唯一，达到样式私有化，不污染全局的作用

[学习]慎用愿意：

只是在设置scoped属性的组件上的所有标签添加一的data开头的属性，且在标签选择器的结尾加上和属性同样的字段，起到唯一性的作用，但是这样如果组件中也引用其他组建就会出现类似下面的问题：

1. 在父组件无scoped，子组件有scoped，父组件是无法操作子组件样式的
2. 父组件有scoped，子组件没有时，父组件也无法设置子组件的样式，父组件所有标签都会带有data-x-xxxxx唯一标志，单子组件不会带有
3. 父子组件都有，同样无法设置样式，更改起来会增加代码量

参考学习博客：

学习博客地址