24.Vue3样式穿透

1,062 阅读1分钟

样式穿透

样式穿透主要用于修改第三方组件库(Element ui),虽然配好了样式但是我们还需要更改它的其他样式就需要用到样式穿透。

scoped原理

Vue中的scoped通过在DOM结构及Css加上唯一且不重复的标记:data-v-hash的方式,来保证它的唯一,达到私有化模块的目的。

www.postcss.com.cn/

1.给HTML的DOM节点加一个不重复data属性(形如:data-v-999)来表示他的唯一性

2.在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-999])来私有化样式

3.如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性

在Vue2中可以通过/deep/来实现样式穿透,它会更改属性选择器的位置。

在Vue3中它推荐使用:deep(选择器),效果于/deep/相同