[JavaScript知识库]在使用vue scoped 和 ::v-deep 的一些感受

使用过Vue的同学都知道 在不同的组件内难免会用到相同的类样式或者ID样式，为了不影响其它组件的样式，我们会在头部加上scoped 标记 ，就像这样

它的原理就是在html标签上添加data-v-xxxxxxxx属性，然后在css类名后添加属性选择器，即利用css类选择 + 属性选择器实现样式局部化。。
关于scoped的使用需要注意一下几点：

1. 并不是所有的css都能私有化，

一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。**
**所以在同一个父组件中多个子组件的布局理解这一点很重要！！！

2.scoped配合::V-deep的使用

当父子组件都有scoped时，在父组件去修改子组件样式时，需要加上::V-deep 或者 >>> 来穿透样式

如果没有效果就需要加上 !important 来提高权重