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

最新推荐文章于 2024-10-11 10:07:11 发布
最新推荐文章于 2024-10-11 10:07:11 发布
阅读量7.7k 收藏 17
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35859392/article/details/108212552
版权
本文介绍了在Vue中如何使用::v-deep（或/deep/）进行样式穿透，以避免scoped限制，影响子组件的样式。详细讨论了在不同场景下，如CSS、SCSS等预处理器环境下的使用方法，并提供了示例代码，特别指出在Vue 3.0中/deep/可能引发的编译错误，推荐使用::v-deep作为更保险且编译速度快的选择。
摘要由CSDN通过智能技术生成

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

 更新时间：2020年06月04日 11:32:59   转载 作者：柳慕笙  
 
这篇文章主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>>

最低0.47元/天 解锁文章
瞎转悠达
关注
vue deep样式穿透使用总结（2022）
samscat的博客
02-09 1万+
在vue2中使用 ::v-deep ::v-deep .el-col { margin-bottom: 20px; } ’ >>> ‘和’ /deep/ '支持已弃用。 在vue3中::v-deep可以使用但是不推荐使用，官方推荐v-deep(.className) ::v-deep(.el-col) { margin-bottom: 20px; } // 缩写 :deep(.el-col) { margin-bottom: 20px; } ...
/deep/ 深度选择器的使用
m0_49373551的博客
11-20 566
使用场景： 我们使用/deep/ 深度选择器最主要的使用场景就是 要跨越 scoped 的限制 使用方式 <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App' } </script> <style lang="less" scoped > /d
vue中各种deep的区别
最新发布
qq_44871531的博客
10-11 565
::v-deep、::deep 和 :deep(),>>>,/deep/
浅谈CSS中/deep/ ＞＞＞ ::v-deep属性 进行样式穿透
m0_48895571的博客
04-01 4832
浅谈CSS中/deep/ >>> ::v-deep属性 进行样式穿透
Vue 深度选择器:deep()与::v-deep详解
CCC_chtt的博客
04-26 2万+
深度选择器:deep()与::v-deep详解
神奇的 ::v-deep
qiaoliang_123的博客
11-14 2万+
神奇的 ::v-deep深度作用选择器 之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。 百度之后...
一文弄懂vue中样式穿透v-deep
梁海江的博客
01-06 1万+
在vue3的世界里，有一个style标签的关键字v-deep，官网称之为样式穿透。那他究竟是什么原理呢？又是这么工作的呢？让我们一起探究一下。
vue中::v-deep的用法
...
03-04 3703
在Vue中，::v-deep是一个用于穿透作用域样式的特殊选择器。
（css样式穿透详解）::v-deep的使用
大雾起了清晨
08-20 3233
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用。② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep。
vue 获取元素额外生成的data-v-xxx操作
10-14
Vue支持一种特殊的深度作用选择器，即使用`>>>`操作符（也可以使用`/deep/`作为同义替换），允许父组件的样式选择器穿透作用域，影响子组件中的元素。例如： ```css .a >>> .b { /* ... */ } ``` 编译后的CSS会是...
vue 出现data-v-xxx的原因及解决
10-15
另外，Vue还提供了深度作用选择器（Deep Selectors），用 `>>>` 操作符来穿透作用域，作用于子组件或组件内的深层元素。例如： ```html .parent >>> .child { /* ... */ } ``` 这会被编译成： ```css .parent...
解决vue加scoped后就无法修改vant的UI组件的样式问题
10-14
- 使用`/deep/`或`::v-deep`来穿透`scoped`，使样式能够影响到子组件Vant的样式。 4. **iOS上输入框被放大**： - 在`index.html`的`<head>`中添加`<meta>`标签，禁止缩放，例如：`<meta content="width=device-...
Vue scoped及deep使用方法解析
10-15
总的来说，Vue 的 `scoped` 和 `::v-deep`（或 `/deep/`）特性提供了强大的样式隔离和组件化能力，帮助开发者更好地管理和控制组件的样式，同时保持代码的清晰和可维护性。在实际项目中，根据组件结构和样式需求灵活...
VUE中的/deep/用法
热门推荐
cxu123321的博客
12-04 3万+
VUE中的/deep/用法 前端沧海关注 2019.08.07 21:06:09字数 489阅读 81 七夕了，写个昨天遇到的bug来缓解下没有人约的尴尬。 昨天和QA过历史bug时，发现有好几个浏览器不兼容的导致式样变形的bug，调查了一番发现是因为deep选择器的原因。 在说bug之前，先看看vue官方是如何说明deep的用法的。 为了保证每个组件的css唯一性，避免污染全局或者被...
VUE开发中/deep/的使用 其他写法v-deep:: vue3中写法 :deep(.img)
Beatingworldline的博客
09-22 2万+
实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，省时省力。 但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，例如这种表格样式 这时候有两条路可选 自己用原生手写一个，但对于初级菜鸟来讲极不友好，会浪费大量时间走弯路 对组件原生样式进行改写 而改写样式就需要用到/deep/样式穿透了 /deep/ VUE官方 为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。 这样在打包的时候会生成一个独一
vue3中的:deep()深度选择器
m0_64664995的博客
11-15 1万+
scoped 属性是HTML5中的新属性，标签在加上了scoped属性时，样式实现组件私有化，父组件的样式不会渗透到子组件，不会造成局部或全局的污染。这个时候如果你想让样式中的一个选择器作用得更深（渗透到子组件），可以使用深度选择器::v-deep。
elementui样式穿透 ::v-deep
08-27
- *1* *2* *3* [#vue# css样式穿透::v-deep的具体使用](https://blog.csdn.net/ZHENGCHUNJUN/article/details/124974776)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值