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 JSQL,SQL无处不在,
May 05 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
微信小程序学习总结(四)事件与冒泡实例分析
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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
详解Django中Request对象的相关用法
2015/07/17 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python selenium 三种等待方式解读
2016/09/15 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
python中时间模块的基本使用教程
2019/05/14 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python 定义只读属性的实现方式
2020/03/05 Python
django列表筛选功能的实现代码
2020/03/27 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
经典公益广告词
2014/03/13 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
会计系毕业求职信
2014/08/07 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
调研报告的主要写法
2019/04/18 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
hive数据仓库新增字段方法
2022/06/25 数据库