vue中::v-deep的用法

最新推荐文章于 2024-08-29 16:37:39 发布
最新推荐文章于 2024-08-29 16:37:39 发布
阅读量2.9k 收藏 10
点赞数 8
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MASILEJFOAISEGJIAE/article/details/136443935
版权

在Vue中，::v-deep是一个用于穿透作用域样式的特殊选择器。

当在一个带有scoped属性的<style>标签中使用::v-deep选择器时，表示允许访问子组件中的样式，即使这些样式被封装在了子组件的作用域中。

在Vue 2.x 中，当使用scoped属性来限定样式作用域时，子组件的样式默认是无法被修改的。如果需要修改子组件中的样式，可以使用::v-deep选择器。

在Vue 3.x 中，::v-deep选择器已经被废弃，取而代之的是>>>选择器，用法类似。

结论：::v-deep选择器或>>>选择器用于在Vue组件中穿透样式作用域，能够修改子组件中被scoped属性封装的样式。

Jack Mai
关注
专栏目录
vue样式穿透 ::v-deep的具体使用
qq_35859392的博客
08-24 7663
vue样式穿透 ::v-deep的具体使用 更新时间：2020年06月04日 11:32:59 转载作者：柳慕笙 这篇文章主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，...
Vue中css的 /deep /及 >>> 的用法
codingWeb的博客
03-08 8599
/deep/ 深度选择器 在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加父组件： <template> <div> <h1 class="title">{{ name }}</h1> <input type="text" v-model.lazy="name"> ...
Vue中scoped、＞＞＞、/deep/、::v-deep的原理
油墨香^-^的博客
04-30 332
平时开发项目我们在使用第三方插件时，必须使用element-ui的某些组件需要修改样式时，老是需要加上/deep/深度选择器，以前只是知道这样用，但是还不清楚他的原理。还有平时每个组件的样式都会加上scoped，但是也不知道他具体的原理。今天我就带大家理解理解理解。
穿透选择器 /deep/、＞＞＞、::v-deep用法分析
最新发布
qq_36011958的博客
08-29 252
穿透选择器 /deep/、＞＞＞、::v-deep用法分析
深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别与用法
油墨香^-^的博客
08-01 431
深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。
::v-deep的使用
学习永无止境
03-31 2万+
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透） 1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式 <style lang="css" scoped> .el-button >
（css样式穿透详解）::v-deep的使用
大雾起了清晨
08-20 3092
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用。② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep。
::v-deep
weixin_55020138的博客
11-19 1513
当我们需要覆盖组件库中的样式时大多数情况只能通过深度作用选择器，::v-deep就是其中一种深度作用选择器。，vuetify等，虽然配好了样式但是有时候我们仍然需要根据需求更改样式。vue样式穿透 ::v-deep的具体使用。所以接下来主要介绍::v-deep的使用。在用到很多vue的组件库如vant，
深度选择器{/deep/ ； ＞＞＞ ； ::v-deep }在vue前端项目中使用注意事项
m0_49714202的博客
02-25 847
官网地址:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8 >>> 在vue中需要去掉 lang 就是原生写法css /deep/ 可以在vue中加lang的css预处理器加less和scss, 用的时候有时会报错 ::v-deep 也可以在vue中加lang的css预处理器加less和s
【Vue】＜style＞中的scoped和v-deep
等时钟成长
09-17 1189
Vue中<style>的scoped和v-deep 组件样式 在vue中，我们通过<template>写HTML，<script> 写JavaScript，而把样式放进<style>中。但是直接写在<style>中的css是全局的，不同组件间的样式会互相影响。所以组件内部的样式我们一般加上scoped标记，避免不同组件间样式的影响。但是有时候（例如引用第三方组件时）我们发现加了scoped的样式并不起作用，所以我们会有/deep/ 、>&gt
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.
01-14
/* 在style标签中使用:deep()代替::v-deep */ :deep(.inner-selector) { /* 样式规则 */ } ``` 这样，你就可以使用`:deep()`来代替`::v-deep`，并在括号中指定内部选择器。这样做可以避免警告和报错。
vue3 中 scss 使用 :deep 不支持嵌套，::v-deep 又即将弃用，怎么办？
04-01
在 Vue3 中，可以使用 `::v-deep` 或 `>>>` 来实现深度选择器，但是官方已经宣布 `::v-deep` 即将被弃用，而 `>>>` 在某些情况下会出现问题。 解决方法： 1.使用 `:global`，可以将样式应用于整个组件或应用程序。...
深度选择器 /deep/ ＞＞＞ ::v-deep的用法
m0_58348743的博客
12-30 2482
深度选择器 /deep/ >>> ::v-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中样式穿透v-deep
时清云的博客
04-02 2596
在vue3的世界里，有一个style标签的关键字v-deep，官网称之为样式穿透。那他究竟是什么原理呢？又是怎么工作的呢？让我们一起探究一下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值