VUE中的/deep/用法
VUE中的/deep/用法前端沧海关注2019.08.07 21:06:09字数 489阅读 81七夕了,写个昨天遇到的bug来缓解下没有人约的尴尬。昨天和QA过历史bug时,发现有好几个浏览器不兼容的导致式样变形的bug,调查了一番发现是因为deep选择器的原因。在说bug之前,先看看vue官方是如何说明deep的用法的。为了保证每个组件的css唯一性,避免污染全局或者被...
VUE中的/deep/用法
前端沧海关注
七夕了,写个昨天遇到的bug来缓解下没有人约的尴尬。
昨天和QA过历史bug时,发现有好几个浏览器不兼容的导致式样变形的bug,调查了一番发现是因为deep选择器的原因。
在说bug之前,先看看vue官方是如何说明deep的用法的。
为了保证每个组件的css唯一性,避免污染全局或者被全局污染,vue提供了scoped作用域
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码会被编译成
.a[data-v-f3f3eg9] .b { /* ... */ }
这么写是没有问题的,但是实际项目中,还有人深度嵌套的写法
<style lang="scss" scoped>
.a /deep/ .b {
......
/deep/ .c {
....
}
}
</style>
生成的代码如下
.a[data-v-32bcae5c] .b {
......
}
.a[data-v-32bcae5c] .b /deep/ .c {
......
}
在Chrome浏览器下是没有问题的,但是在其他浏览器上就完全不可行了
.a[data-v-32bcae5c] .b /deep/ .c {
......
}
上面这部分代码完全失效了,为什么尼?
因为/deep/选择器这个是chrome浏览器自己的标准,其他浏览器并没有实现这个标准,所以其他浏览器是失效的。
有意思的是,google说会在chrome的63这个版本,移除/deep/的支持,不知道为啥现在最新的还是会有?
既然问题知道了,bug自然就好解决了,不要用/deep/嵌套就好了。
vue官方也说了,当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍,当然这种写法对于程序员来说是最友好的。
之前写react时用的是CSS Modules,他比较麻烦的是需要导入一个变量,其他的一切完美,vue也提供了支持,新项目还是用CSS Modules吧,解决更彻底。
参考文档
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符:
有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
或 ::v-deep
操作符取而代之——两者都是 >>>
的别名,同样可以正常工作。
更多推荐
所有评论(0)