关于在vue3项目中使用/deep/和::v-deep控制台报警告的问题记录--【vue3中用:deep()代替】

最新推荐文章于 2024-03-25 16:04:26 发布
最新推荐文章于 2024-03-25 16:04:26 发布
阅读量2.9k 收藏 4
点赞数 4
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangshuo0520ai/article/details/125803182
版权

vue3中强制修改组件样式使用:deep()

【问题出现背景】在开发过程中需要对组件样式进行强制修改，但是却在控制台报出了警告提示：

[@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead.

当时就觉得很纳闷 于是度娘了一番才知道：原来在vue3中原来vue2中 ::v-deep和/deep/的写法已经被弃用了，改成 :deep()代替

在这里插入图片描述
修改为以下写法：
在这里插入图片描述

工作小记录，共同学习共同成长！！！耶耶耶

wangshuo0520ai
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
元素黛咪 一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 // vue2.x + element-ui npm i element-demi element-ui # or yarn add element-demi element-ui // vue3.x + element-plus npm i element-demi element-plus # or yarn add element-demi element-plus :top_hat: 用法 Vue2 import Vue from 'vue' import ElementUI from 'element-demi' Vue . use ( Elemen
Vue3深度选择器 :deep()
~~
04-20 5726
使用 :deep() 替换 ::v-deep。vue3中： :deep()vue2中： ::v-deep。
【Vue】/deep/、＞＞＞、v::deep 三种深度选择器
Owen的博客
06-27 3545
在 Vue项目中，当一个组件使用了scoped特性时，组件内的样式只会应用于组件自身。但是有时候我们需要在父组件中改变子组件中的样式，这时就需要用到深度选择器。
[@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead.
最新发布
SailingCoder的博客
03-25 497
警告信息是与Vue.js迁移到3.x版本有关的，其中>>>和/deep/选择器已被弃用，转而支持:deep()选择器。这些选择器用于全局应用样式，并影响Vue中CSS作用域的工作方式。选择器之前用于将样式应用于组件的直接子元素。在Vue 3中，应该使用:deep()来在CSS中实现相同的效果。选择器之前用于将样式深入到组件树的内部。在Vue 3中，您也应该为此目的使用。等构建工具，它们应该会自动处理这个问题。如果没有使用构建工具，需要手动设置。要求您的CSS必须通过。
vue样式穿透 ::v-deep的具体使用
10-15
主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
| 演示页面 演示Gif 使用技术 画布版本 结合使用D3.js和Canvas可以更有效地绘制organizationChart。 使用unique-color方式识别Canvas中的鼠标单击事件（您可以参考以查看详细信息） SVG版本 使用D3计算节点和链接位置 使用Vue处理dom元素进入和离开 使用Vue插槽让用户轻松使用自己的数据 如何使用？ SVG版本 1.安装npm模块 npm install @ssthouse/vue-tree-chart 2.注册vue-tree组件 import VueTree from '@ssthouse/vue-tree-chart' import Vue from 'vue' Vue . component ( 'vue-tree' , VueTree ) 3.使用组件 3.1基本用法 见代码< template> < div clas
vue3如何使用::v-deep样式穿透
海风依旧
11-06 7519
vue3中如何使用样式穿透？::v-deep让你在开发中更快更便捷的修改样式
vue3中的:deep()深度选择器
m0_64664995的博客
11-15 4763
scoped 属性是HTML5中的新属性，标签在加上了scoped属性时，样式实现组件私有化，父组件的样式不会渗透到子组件，不会造成局部或全局的污染。这个时候如果你想让样式中的一个选择器作用得更深（渗透到子组件），可以使用深度选择器::v-deep。
一文弄懂vue中样式穿透v-deep
梁海江的博客
01-06 4641
在vue3的世界里，有一个style标签的关键字v-deep，官网称之为样式穿透。那他究竟是什么原理呢？又是这么工作的呢？让我们一起探究一下。
VUE开发中/deep/的使用 其他写法v-deep:: vue3中写法 :deep(.img)
Beatingworldline的博客
09-22 1万+
实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，省时省力。 但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，例如这种表格样式 这时候有两条路可选 自己用原生手写一个，但对于初级菜鸟来讲极不友好，会浪费大量时间走弯路 对组件原生样式进行改写 而改写样式就需要用到/deep/样式穿透了 /deep/ VUE官方 为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。 这样在打包的时候会生成一个独一
Vue 深度选择器:deep()与::v-deep详解
热门推荐
CCC_chtt的博客
04-26 2万+
深度选择器:deep()与::v-deep详解
v-tooltip:Vue 3的工具提示
03-20
v工具提示 Vue 3工具提示自定义指令目录安装将tooltip.js粘贴到您的src文件夹中，为了清楚起见，我亲自在其中创建了文件夹directives 。下一步是将tooltip.css粘贴到assets文件夹中。拥有所有文件后，打开main.js...
vue-calc:使用Vue 3进行日常使用的简单实用数字项目
03-10
vue-calc:使用Vue 3进行日常使用的简单实用数字项目
vue3弃用/deep/深度穿透
v201341179的博客
08-09 1598
vue3弃用/deep/语法
vue3中对于/deep/和::v-deep的警告信息处理
大香蕉的博客
12-23 6334
::v-deep usage as a combinator has been deprecated. Use :deep() instead. the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
Vue3/ Vue3 Scrip 内 setup 语法 、Vue 样式穿透 /deep/ ::v-deep
m0_64494670的博客
01-07 678
Vue3/ Vue3 Scrip 内 setup 语法 、Vue 样式穿透 /deep/ ::v-deep
vue3中less、sass最新的深度选择器 deep()
qq_34070719的博客
03-02 1万+
vue3中深度选择器/deep/ >>> ::v-deep 已经废弃，请使用最新的深度选择器 deep() 今天在写vue3项目的时候，有个元素需要使用到深度选择器，于是还是像以前一样使用了 /deep/ .el-button{ width:80%; } 没想到控制台提示 我尝试了第二种深度选择器 ::v-deep 能选中 还是提示deep() 最后尝试了:deep()果然不提示了,而且也选中了 :deep( .el
vue3 :deep()的使用
smileKH的博客
04-07 7554
对应前端小白来说，一看到:deep()这些模式的用法就不理解是啥意思，下面简单介绍一下:deep()是什么以及如何使用。这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！
vue3 中 scss 使用 :deep 不支持嵌套，::v-deep 又即将弃用，怎么办？
04-01
在 Vue3 中，可以使用 `::v-deep` 或 `>>>` 来实现深度选择器，但是官方已经宣布 `::v-deep` 即将被弃用，而 `>>>` 在某些情况下会出现问题。 解决方法： 1.使用 `:global`，可以将样式应用于整个组件或应用程序。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值