vue样式穿透 ::v-deep的具体使用

之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。

百度之后发现 可以用 /deep/或::v-deep来解决***（不过在vue3.0的环境下，使用/deep/时，编译会报错）***。没想到官方文档中其实早就给出了解决方案，怪自己没有认真看过文档，对vue的掌握还是不够熟悉啊，得好好学习了。

深度作用选择器

如果你希望 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更保险并且编译速度更快.

到此这篇关于vue样式穿透 ::v-deep的具体使用的文章就介绍到这了,更多相关vue ::v-deep内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue中CSS样式穿透问题

    详解Vue中CSS样式穿透问题

    1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有

  • vue样式穿透 ::v-deep的具体使用

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

  • 样式穿透vue中的scoped详谈

    样式穿透vue中的scoped详谈

    目录 前言 scoped的使命与作用 scoped的副作用 样式穿透(::v-deep) 总结 前言 我们平常在开发过程中特别是Vue技术栈的前端同学们,经常会用到一些UI组件库,特别是element-ui使用的频率是比较高的,我们经常会修改这些UI组件库的默认样式时会使用到深度选择器,大家都知道这么做,有没有想过为什么?趁着疫情在家于是研究了一下,在这里分享一下 scoped的使命与作用 这里用vue做了一个demo,两个页面,一个页面中是掘金的a标签,一个页面是vue的a标签,我们一起看下s

  • Vue3样式渗透之deep()为什么无效详解

    Vue3样式渗透之deep()为什么无效详解

    今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习. :deep()的使用场景: 如果给当前组件的style 节点添加了scoped 属性,则当前组件的样式对其子组件是不生效的.如果想让某些样式对子组件生效,则需要使用:deep(). 我原本觉得这个没有难度,于是写了个案例来验证.然后问题出现了,:deep()定义的样式在子组件中不起作用.我开始找错,把包括冒号.括号在内的语法格式等都检查了一遍,发现语法格式没有问题,控制台也

  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址: https://github.com/lenve/VBlog 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 后端技术栈 后端主要采用了: 1.SpringBoot 2.SpringSecurity 3.MyBatis 4.部分接口遵循Restful风格 5.MySQL 前端技术栈 前端主要采用了: 1.Vue

  • Vue 样式切换及三元判断样式关联操作

    假设有需求: 后台返回状态1:启用,0:禁用 1.若要使启用为绿色,禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope"> <div :class="{active:scope.row.status==1}"> {{ scop

  • vue之webpack -v报错解决方案总结

    小白学习一下vue,然后了解到了webpack相关的知识,然后就各种安装 cnpm 是国内的源相比国际源要快很多,不知道cnpm的自己查一下吧. cnpm install -g webpack 等一会安装成功了,我就想看一下webpack 的版本 又提示我要安装webpack-cli,那就安装吧 cnpm install -g webpack-cli 等一会就安装好了,再看一下webpack -v就报下面的错了. $ webpack -v C:\Users\Administrator\AppDa

  • Vue 样式绑定的实现方法

    学习 Vue 的时候觉得样式绑定很简单,但是使用的时候总是容易搞晕自己.因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的.这篇文章就简单对 Vue 绑定做个总结. 操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是属性,所以可用v-bind处理,通过表达式计算出字符串结果即可.不过字符串拼接麻烦且易错.因此,在将v-bind用于class和style时,Vue做了专门增强,表达式结果类型除了字符串之外,还可是对象或数组. Cl

  • vue样式叠层z-index不起作用的解决方案

    vue样式叠层z-index不起作用的解决方案

    目录 z-index不起作用 z-index失效的原因 vue element 弹框样式叠层问题 z-index不起作用 问题:当点击出现element弹框时,与当前的页面出现叠层问题(使用样式z-index无果),导致弹框页面无法输入. 问题效果图如下: 这里的两个下拉框和echarts图表与弹框修改密码出现叠层问题. 解决思路: 本人一开始在层级上寻在了半天,未能解决问题(采用样式z-index无果),后来发现是上个开发兄弟在两个下拉框和echarts图表均使用到了样式 position:

  • vue对插件(iview,elementui,treeselect)样式的局部修改方式

    目录 (iview,elementui,treeselect)样式的局部修改 学习描述 具体方法 vue+iview 样式穿透-修改第三方插件样式 修改第三方插件样式 (iview,elementui,treeselect)样式的局部修改 学习描述 在vue的使用过程中,我们知道插件的使用可以大大的提高我们的开发效率,这写插件都是经过很多人的验证和修改的,要比我们自己写方便的很多. 但是在开发的过程中,有些插件一些在特定的页面我们可能不要原来的样式,需要进行修改.然而我们在使用vue的过程中都会

随机推荐