scoped为使样式私有化,当一个style上加了scoped属性时,样式只作用于当前组件.scoped属性的效果是通过给每个DOM元素添加唯一标识,给css加上对应的标识,这种做法使得样式只作用于含有该属性的dom——组件内部dom。(data-v-hash的方式来使css有了它对应模块的标识)
如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
vue中scoped属性:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
scoped的穿透(1和2有违scoped本意,不做推荐)
解决组件样式全局污染的办法:1.写两个style,一个用于全局,一个用于私有化
2.<style scoped> 外层 >>> 第三方组件 { 样式 } </style>
3.给组件一个类名或其他甄别属性的id,如需覆盖样式则对该类名进行重写样式!(最为推荐!)
scoped穿透:https://www.cnblogs.com/karthuslorin/p/9038854.html