vue中style的scoped属性

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

posted @ 2021-01-12 09:38  小羊杨杨  阅读(676)  评论(0编辑  收藏  举报