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 陷阱 window全局对象
Nov 26 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
js实现简单数字变动效果
Nov 06 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
javascript头像上传代码实例
Sep 28 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
模拟flock实现文件锁定
2007/02/14 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
js 表格隔行颜色
2009/12/02 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
手写实现JS中的new
2021/11/07 Javascript
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js