vue样式穿透::v-deep和/deep/的具体使用-案例

「爱情、让人受尽委屈。」 2022-10-07 13:47 437阅读 0赞

> 在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。
> 
> 搜索之后发现可以用 /deep/或::v-deep来解决（不过在vue3.0的环境下，好像使用/deep/时，编译会报错）

**深度作用选择器**

> 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：  
> `<style scoped> .a >>> .b { /* ... */ } </style>` 上述代码将会编译成：  
> `.a[data-v-f3f3eg9] .b { /* … */ }`
> 
> 有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作

**1、>>>**

如果vue的style使用的是css，那么则

<style lang="css" scoped>
    .a >>> .b { 
     /* ... */ 
    }
    </style>

但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

**2、/deep/**

<style lang="scss" scoped>
    .a{
     /deep/ .b { 
      /* ... */ 
     }
    } 
    </style>

但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。  
此时我们可以使用第三种方式

**3、::v-deep**

切记必须是双冒号

<style lang="scss" scoped>
    .a{
     ::v-deep .b { 
      /* ... */ 
     }
    } 
    </style>

**使用场景:**

当我们需要覆盖element-ui中的样式时只能通过深度作用选择器

style为css时的写法如下

.a >>> .b {
      ***
     }

style使用css的预处理器(less, sass, scss)的写法如下

第一种/deep/

/deep/ .a {
      ***
     }

第二种::v-deep

::v-deep .a {
      ***
     }

> 建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快

发表评论取消回复

表情：

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

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

相关阅读

相关（css样式穿透详解）::v-deep的使用

目录背景使用： 1、当项目中使用的 css 原生样式，需要使用 >>> 深度选择器来修改外用第三方组件的样式 2、当项目中使用的 css 扩展语言是 less

红太狼/ 2023年10月14日 23:44/ 0 赞/ 62 阅读

相关 Vue3中scoped样式穿透原理以及如果使用样式穿透

主要是用于修改很多vue常用的组件库（element, vant, AntDesigin），虽然配好了样式但是还是需要更改其他的样式，就需要用到样式穿透。 scoped的原

刺骨的言语ヽ痛彻心扉/ 2023年10月10日 21:23/ 0 赞/ 34 阅读

相关 vue 样式穿透尖括号3、/deep/ 、::v-deep 应用场景注意事项

[官方文档地址,更多关于Scoped CSS的内容][Scoped CSS] 在很多vue的组件库 , 如`vant，elementUI， iview`等都可能自定义一些样式

本是古典何须时尚/ 2023年02月20日 04:47/ 0 赞/ 12 阅读

相关 Vue样式穿透

在vue组件中，样式一般都会加上scoped属性来防止组件之间的样式冲突，但是这样也会造成一个问题，如果想组件中修改UI（比如element-ui）库中的某一个样式，会失效。

曾经终败给现在/ 2022年12月21日 13:59/ 0 赞/ 190 阅读

相关 vue样式穿透::v-deep和/deep/的具体使用-案例

> 在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" sco

「爱情、让人受尽委屈。」/ 2022年10月07日 13:47/ 0 赞/ 438 阅读

相关【Vue】样式穿透 ::v-deep的具体使用

【Vue】样式穿透 ::v-deep的具体使用之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用

桃扇骨/ 2022年09月14日 14:19/ 0 赞/ 277 阅读

相关 Vue--样式穿透

原文网址：[Vue--样式穿透\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 [vue样式穿透 ::v-deep的具体使用 - 只争朝

秒速五厘米/ 2022年09月03日 05:20/ 0 赞/ 212 阅读

相关 vue 修改富文本的样式使用 deep selectors >>>

情景描述：在vue中，后台编辑富文本信息通过接口返回到前端页面中，为了样式的统一和美观，我们可以在一定程度上

矫情吗；*/ 2022年02月04日 04:37/ 0 赞/ 992 阅读

相关 iview - css >>> 、 /deep/ 进行样式穿透

前言在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用`scoped`达到样式只制

本是古典何须时尚/ 2021年09月29日 06:02/ 0 赞/ 461 阅读

相关 Vue 中 scoped 样式穿透

vue引用了第三方组件，如elementUI，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。办法一：使用::v-dee

古城微笑少年丶/ 2021年07月26日 01:33/ 0 赞/ 563 阅读