1.什么是scoped
在Vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,局部有效。如果一个项目中所有的Vue组件style标签全部加上了scoped,相当于实现了样式私有化。如果引用了第三方组件,需要在当前组件的局部修改第三方组件的样式,而又不去想去除scoped属性造成组件之间的样式污染,就只能通过穿透scoped的方式解决
<style scoped>
</style>
2.scoped实现原理
简单来说就是PostCSS给所有的dom添加了一个唯一不重复的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中的dom,这种做法使得样式私有化