Vue3使用:deep深度选择器的正确姿势，你写的为啥没效果？

左手的ㄟ右手 2023-10-13 12:29 45阅读 0赞

在vue3中项目中，使用深度选择器可能会出现如下错误：  
\[@vue/compiler-sfc\] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.  
翻译是>>>和/deep/已经被弃用，要用:deep()代替  
代码如下：

<style>
    :deep(.class){
    }
    </style>

为什么需要单独拿出来讲解呢，因为目前大部分项目还是用的>>>和/deep/方法，并且对于使用:deep()还会有些语法错误，例如如下的语法错误：

在父元素的class后加上:deep()

<style>
    .父元素class :deep(.class){
    }
    </style>

在scss下的父元素里用:deep()语法

<style lang=scss>
    .父元素{
     	:deep(.class){
    	}
    }
    
    </style>

**总结就是要把:deep()单独一块放在style中，才会生效。**

正常情况下，如果生效了，vscode会自动识别：就像下面这个样子

![2dd022ab4be14d96917a06aecd131cc8.png][]

如果没有生效，就会没有颜色：

![e45ef0d40f424365946b49fdd5da06e4.png][]

当你单独把这个deep放到style标签中，就会生效了：而且不能使用lang属性

![6d6394d8edc643ce8c757df53a7bd36a.png][]

[2dd022ab4be14d96917a06aecd131cc8.png]: https://img-blog.csdnimg.cn/2dd022ab4be14d96917a06aecd131cc8.png
[e45ef0d40f424365946b49fdd5da06e4.png]: https://img-blog.csdnimg.cn/e45ef0d40f424365946b49fdd5da06e4.png
[6d6394d8edc643ce8c757df53a7bd36a.png]: https://img-blog.csdnimg.cn/6d6394d8edc643ce8c757df53a7bd36a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关为你的 React 项目选择正确框架的重要性

其模块化方法和可重用组件的使用不仅简化了动态 Web 应用程序的开发，而且还显着提高了项目的效率和可扩展性。然而，随着应用程序变得越来越复杂，对更健壮的结构的需求变得越来...

小灰灰/ 2024年05月07日 22:20/ 0 赞/ 72 阅读

相关 Vue3使用:deep深度选择器的正确姿势，你写的为啥没效果？

在vue3中项目中，使用深度选择器可能会出现如下错误： \[@vue/compiler-sfc\] the >>> and /deep/ combinators have

左手的ㄟ右手/ 2023年10月13日 12:29/ 0 赞/ 46 阅读

相关 webpack 的正确使用姿势

我想大部分人都用过 webpack 。作为现代前端开发中最火的模块打包工具，它只需要通过简单的配置，就能轻松完成模块的加载和打包，实属神器。不过我发现身边很多朋友都觉得它不

妖狐艹你老母/ 2023年07月23日 15:55/ 0 赞/ 146 阅读

相关 Vue中使用websocket的正确姿势

文章目录 1：首先谈谈websocket是什么？ 2: vue中怎么使用 3:websocket的属性讲解 WebSocket 对象作

小鱼儿/ 2022年12月03日 01:38/ 0 赞/ 204 阅读

相关 vue3.x中使用深度选择器 /deep/ ＞＞＞

在vue2中使用深度选择器可以使用旧版写法： /deep/ input{ } >>> input{ } 在vue

淡淡的烟草味﹌/ 2022年10月09日 00:42/ 0 赞/ 255 阅读

相关正确使用 protobuf 的姿势

Protobuf 总结用途 Protobuf 是 google 出品的序列化框架，可跨平台、跨语言使用，扩展性良好。与 XML， JSON 等序列化框架相同，Pr

た入场券/ 2022年04月15日 05:08/ 0 赞/ 421 阅读

相关 /deep/ 深度选择器

/deep/深度选择解析 /deep/深度选择器用于将全局的组件或者类的样式转换为局部的类从而达到在scoped内部添加样式后起作用的目的，比如要给scoped内部的.

╰半夏微凉°/ 2022年02月12日 22:45/ 0 赞/ 339 阅读

相关 Dapper的正确使用姿势

Dapper优势和缺点优点高性能、易排查、易运维、灵活可控缺点和EF相比，手写sql当修改表结构不易发现bug。习惯了EF后再来使用Dappe

谁借莪１个温暖的怀抱￠/ 2022年01月29日 04:21/ 0 赞/ 455 阅读

相关手把手教你使用XUI的正确姿势

> 俗话说，代码是最好的老师，阅读源码是一个非常好的习惯。使用说明文档写得再仔细，也会有遗漏不足的地方，因此我鼓励大家在使用XUI的时候，结合演示Demo的代码进行开发，这样比

青旅半醒/ 2021年12月17日 07:49/ 0 赞/ 319 阅读

相关浅析deep深度选择器

之前在开发中遇到一个问题，vue项目结合element ui使用。但是element ui的样式不一定符合我们的需求，这时我们就需要改变它的样式。比如博主使用到了ele

怼烎@/ 2021年09月18日 11:46/ 0 赞/ 436 阅读