为啥需要deep
在现在单页面的开发中,我们经常遇到:在当前页面控制子级组件样式时,控制不了样式
Why?
为什么会这样了:
-
通过代码可以看出控制不了样式的元素,都是组件动态挂在的元素,而是不是预编译的元素
-
我们发现在框架编译后的样式中,预编译元素的每个样式类都是
className[data-v-xxx]
格式的,因为在style 标签中添加了scoped属性(<style lang="scss" scoped>)
,而scoped模式的作用就是为了防止页面组件之间出现样式污染的情况
所以就出现了scoped模式下不能控制动态元素样式的问题
什么是样式污染?
顾名思义:就是指多个组件定义了同样的样式类,但赋值了不同的样式,如果出现污染,那这些样式就会被取并集,应用到同一类元素
className[data-v-xx]
- 生成
className[data-v-xx]
前提是元素已经提前编写在了<template>
模板元素中,能够被VUE探查到 data-v-xx
:是用来标记和区分样式用的,框架在处理css时会根据style标签中的scoped属性判断是否需要区分样式
解决办法
框架提供了两个解决办法:
- 一种就是去掉style中的scoped属性,让样式成为全局样式
- 通过
v-deep
或:deep(className)
通过上面两种方式处理后,就会发现 data-v-xx
没有了,而两者有什么区别了?
- 第一种去掉scoped:去掉scoped属性后,当前组件的所有样式类都不会加
data-v-xx
标记,虽然这样很方便,但这样很容易出现样式污染 - 第二种使用
v-deep
或:deep(className)
(推荐)
:这种方法只是会消除className下所有样式类的data-v-xx
标记,不会消除父级样式类的data-v-xx
标记,可以有效防止出现样式污染(同时建议每个组件的根节点都加一个自定义的类名,书写时从根据点类名开始)