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 相关文章推荐
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
iView框架问题整理小结
Oct 16 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP 和 HTML
2006/10/09 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
js查错流程归纳
2012/05/04 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python解析最简单的验证码
2016/01/07 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python的继承知识点总结
2018/12/10 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
深入理解Python异常处理的哲学
2019/02/01 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
汽车运用工程毕业生自荐信
2013/10/29 职场文书
办公室前台岗位职责
2014/01/04 职场文书
未婚证明书模板
2014/10/08 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书