你知道 style 上加 scoped 属性的原理吗？

1.scoped的作用:

scoped是为了在vue文件中使样式模块化,防止样式污染,添加上scoped属性表示只在当前的模块中生效

 

2.scoped 的实现原理：

1. Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现, PostCSS 给当前组件下的所有 dom 添加了一个唯一不重复的动态属性[ data-v-xxxx],而其他组件就不会添加[data-v-xxxx]属性

2. 如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样 式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透选择器 ::v-deep 的方式来解决.