Vue 中的 style scoped 和 data-v-*
在项目中经常遇到引用某个第三方组件,想要覆写它的样式,如果自己的 style 中加了 scoped,是没法生效的。实际看 dom 长这样 <div data-v-7ba5bd90="" id="app">
,同样样式代码也被编译成了 #app[data-v-7ba5bd90]{}
,这样防止了对其他的同样选择器的dom的污染。
scoped 不会处理子组件中的 dom,因此如果想让子组件能够样式被覆写,需要去掉 scoped,在父级别加上合适的父级 class 防止污染到其他地方即可。
以上是 Vue 中的 style scoped 和 data-v-* 的全部内容, 来源链接: utcz.com/z/264035.html