Vue 3 迁移策略笔记—— 第31节：scoped styles 的变化

最新推荐文章于 2022-10-01 09:35:00 发布

杰~JIE

最新推荐文章于 2022-10-01 09:35:00 发布

阅读量790

点赞数 1

分类专栏： Vue 3 迁移策略笔记文章标签： vue3 css scoped styles

本文链接：https://blog.csdn.net/weixin_44869002/article/details/116132160

版权

32 篇文章 58 订阅

订阅专栏

本笔记主要基于官方文档《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

在 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>。这样整个组件文件看起也更加简洁。

Vue 2.x 中，父组件通过 slot 传给子组件的内容是不受子组件局部样式的影响的。到了 Vue 3.x ，我们可以借助新伪元素::v-slotted()，实现子组件控制 slot 的样式。

::v-slotted(.foo) {}

关注