前言
本笔记主要基于官方文档《0023-scoped-styles-changes.md》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
一个改变: 深度选择器
在Vue3.中,Vue 2.x 的深度选择器 >>>
、/deep/
已经被弃用了。::v-deep
作为组合器的写法同样被弃用。
<style scoped>
/* 以下三种写法被弃用 */
.a >>> .b { /* ... */ }
.a /deep/ .b { /* ... */ }
.a::v-deep .b { /* ... */ }
</style>
取而代之的是将::v-deep
作为伪元素,并接受其他选择器作为参数。
<style scoped>
.a::v-deep(.b) { /* ... */ }
</style>
为什么要这样变动?
弃用>>>
: 因为 >>>
在某些css预编译处理器(如:sass)是不支持的。为了统一写法,直接弃用。
弃用 /deep
/: /deep/
是vue2.x中>>>
替代方案,在 css预编译处理器可以正常使用。但是,***Chrome打算弃用了/deep/
组合器,并且在IE中会报错。***所以 Vue3.x 预见性的弃用了/deep/
。
::v-deep
写法的改变:因为 ::v-deep
实际上不是组合器,Vue 认为:相比之前的写法,伪元素的写法更加贴切。
关于这部分更加细致说明,可查看:Deep Selectors
两个新增:全局样式和 slot 样式
全局样式 ::v-global()
:global()
在 Vue 2.x scoped styles 的样式只能在局部生效。但是到了 Vue 3.x, 这样的“局面”发生了变化。Vue 3.x 增加了一个全新的伪元素::v-global()
,借助::v-global()
,我们可以让 scoped styles 中的样式到全局中生效。用法如下:
::v-global(.foo) {}
:global()
是::v-global()
的简写。
在 Vue2.x 如果想要在组件中写全局样式,只能用两个<style>
区分开全局样式和局部样式:
<style>
/* 全局样式 */
</style>
<style scoped>
/* 局部样式 */
</style>
在 Vue 3.x 我们借助 ::v-global()
可以直接在 scoped styles 中写全局样式。所以不再需要在一个组件设置两个 <style>
。这样整个组件文件看起也更加简洁。
slot 样式:::v-slotted()
Vue 2.x 中,父组件通过 slot 传给子组件的内容是不受子组件局部样式的影响的。到了 Vue 3.x ,我们可以借助新伪元素::v-slotted()
,实现子组件控制 slot 的样式。
::v-slotted(.foo) {}