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


Posted in Javascript onJune 04, 2020

之前在项目中用到了 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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 #Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 #Javascript
微信小程序实现watch监听
Jun 04 #Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 #Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 #Javascript
vue基础知识--axios合并请求和slot
Jun 04 #Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 #Javascript
You might like
php常用字符串处理函数实例分析
2014/11/22 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python实现代理服务功能实例
2013/11/15 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python之文字转图片方法
2018/05/10 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
集体备课反思
2014/02/12 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
保证书范文大全
2014/04/28 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
同学会邀请函模板
2015/01/30 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python