样式穿透 ​

理解 scoped 原理 ​

1.当你想私有当前组件的样式，vue 组件中可以使用 scoped 属性，scoped 底层是通过在 DOM 节点中添加 data-v-xxx，CSS 中通过添加[data-v-xxx]属性过滤，提高优先级，来实现样式的私有化；

2.当前组件使用了 scoped 时，会在当前 vue 组件的根元素 和 子孙组件的根元素 和当前 vue 组件的 html 标签上 加上 data-v-xxx 属性。

何时使用样式穿透 deep ​

1.当你想修改一个组件内部的元素样式，但是该元素并不是当前 vue 组件的根元素， 也不是当前 vue 组件的子孙组件的根元素，也不是当前 vue 组件的 html 标签时就要使用样式穿透；

2.一般来说要想修改当前 vue 组件引用的组件的内部样式，我们就使用样式穿透，这样可以让别人快速知道当前的这个类名或者其他的 css 选择器是属于当前引用的这个组件的。