位置: IT常识 - 正文

Vue3中样式渗透:deep()为什么无效(vue的样式穿透)

编辑:rootadmin
Vue3中样式渗透:deep()为什么无效

推荐整理分享Vue3中样式渗透:deep()为什么无效(vue的样式穿透),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue scoped样式穿透,vue的样式穿透,vue的样式穿透,vue的样式穿透,vue样式scope,vue scoped样式穿透,vue scoped样式穿透,vue scoped样式穿透,内容如对您有帮助,希望把文章链接给更多的朋友!

今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习。

:deep()的使用场景:

Vue3中样式渗透:deep()为什么无效(vue的样式穿透)

如果给当前组件的style 节点添加了scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,则需要使用:deep()。

我原本觉得这个没有难度,于是写了个案例来验证。然后问题出现了,:deep()定义的样式在子组件中不起作用。 我开始找错,把包括冒号、括号在内的语法格式等都检查了一遍,发现语法格式没有问题,控制台也不报错,但是:deep()格式的样式在子组件中就是无效。 幸好我这儿有一个:deep()格式起作用的范例,没办法,只好把两个文件中的父组件、子组件逐一比对,前后费了不少时间,终于找到了问题所在。

我在前面练习的时候,Vue2.X中要求元素必须在一个根节点中,Vue3.X无此要求,可以不在一个根节点中,所以为了验证这一点,我把外层的

删去了,果然不报错。

可是问题就出在这个根节点上,如果App.vue中没有这个根节点,那么:deep()不起作用,我把根节点加上,:deep()样式就生效了。 唉,感觉自己被这个根节点坑了一把。 1.父组件App.vue中代码

<style lang="less" scoped> :deep(.title3){ background-color:antiquewhite; }</style>

2.子组件中的代码

<template> <h3 class="title3">受父组件影响的内容</h3></template>

还有一点让我觉得新鲜,CSS中颜色的色块有两个。

本文链接地址:https://www.jiuchutong.com/zhishi/295264.html 转载请保留说明!

上一篇:Vue3 开发环境和生产环境打包配置(vue项目开发环境)

下一篇:React--》一些不常见的hook函数讲解(react.strictmode)

  • 抖音APP怎么发朋友圈不显示抖音号(抖音里面的怎么发朋友圈)

    抖音APP怎么发朋友圈不显示抖音号(抖音里面的怎么发朋友圈)

  • 如何找回回收站删除的文件

    如何找回回收站删除的文件

  • 直接按电源开电脑开机进入BOS界面的原因(从电源开关可以直接接出来插排吗)

    直接按电源开电脑开机进入BOS界面的原因(从电源开关可以直接接出来插排吗)

  • 手机屏幕失灵怎么办(手机屏幕失灵怎么强制关机)

    手机屏幕失灵怎么办(手机屏幕失灵怎么强制关机)

  • 打印机打印错误是什么原因(打印机打印错误怎么解决)

    打印机打印错误是什么原因(打印机打印错误怎么解决)

  • 快手我被作者赞了什么不显示(快手作者赞过有什么用处吗)

    快手我被作者赞了什么不显示(快手作者赞过有什么用处吗)

  • wifi太远了信号不好怎么办(wifi远了信号不好怎么办)

    wifi太远了信号不好怎么办(wifi远了信号不好怎么办)

  • 抖音显示刚刚看过什么意思(抖音显示刚刚看过主页看过什么意思)

    抖音显示刚刚看过什么意思(抖音显示刚刚看过主页看过什么意思)

  • word次方怎么输入(word里面次方怎么打出来)

    word次方怎么输入(word里面次方怎么打出来)

  • oppo手机开不机怎么办(OPPO手机开不机怎么回事)

    oppo手机开不机怎么办(OPPO手机开不机怎么回事)

  • 设置找不到安全和隐私(设置找不到安全权限怎么办呢)

    设置找不到安全和隐私(设置找不到安全权限怎么办呢)

  • 华为荣耀10能不能装内存卡(华为荣耀10能不能开空调)

    华为荣耀10能不能装内存卡(华为荣耀10能不能开空调)

  • 蓝牙idac什么意思(蓝牙ldac有什么用)

    蓝牙idac什么意思(蓝牙ldac有什么用)

  • 手机焦距怎么调(手机焦距怎么调到最大)

    手机焦距怎么调(手机焦距怎么调到最大)

  • 看别人抖音会有记录吗(看别人抖音会有访客记录吗2021)

    看别人抖音会有记录吗(看别人抖音会有访客记录吗2021)

  • qq注销好友会被删除吗(qq注销好友会被自动删除吗)

    qq注销好友会被删除吗(qq注销好友会被自动删除吗)

  • 南瓜电影怎么取消自动续费(南瓜电影怎么取消)

    南瓜电影怎么取消自动续费(南瓜电影怎么取消)

  • iphone11有夜景模式吗(夜景模式苹果11)

    iphone11有夜景模式吗(夜景模式苹果11)

  • 华为p30pro耳机怎么用(华为p30pro耳机怎么连接)

    华为p30pro耳机怎么用(华为p30pro耳机怎么连接)

  • 手机怎么拍摄一寸照片(手机怎么拍摄一张好的照片)

    手机怎么拍摄一寸照片(手机怎么拍摄一张好的照片)

  • 手机管家云端相册在哪(手机管家云端相册怎么找)

    手机管家云端相册在哪(手机管家云端相册怎么找)

  • 大陆用whatsapp方法(大陆能用whatsapp)

    大陆用whatsapp方法(大陆能用whatsapp)

  • 爱奇艺账号怎么申诉(爱奇艺账号怎么不让别人继续使用)

    爱奇艺账号怎么申诉(爱奇艺账号怎么不让别人继续使用)

  • 【前端】批量导入和导出Excel数据(前端批量下载图片)

    【前端】批量导入和导出Excel数据(前端批量下载图片)

  • 转让金融资产需要交税吗
  • 丢失增值税发票已报税证明单怎么开
  • 哪些企业需要纳税
  • 培训产生的费用
  • 会计做账借贷怎么做
  • 股权转让需要开董事会吗
  • 非独立核算分公司个税怎么申报
  • 凭证日期小于当前会计期啥意思
  • 轿车被盗
  • 取得划拨或赠与资产需要缴企业所得税吗?
  • 烟叶收购方案制定步骤
  • 公司存款利率
  • 债券投资损失准备累计已计提
  • 期末数未分配利润为负数的会计分录怎么处理?
  • 一般纳税人怎么交税
  • 进项发票和销项发票金额相同还需要交税金吗
  • 投资大收益小,怎么办?
  • 工程备用金金额怎么算
  • 出口货物收汇是什么意思
  • qt5core.dll丢失解决方法
  • 苹果静音模式siri
  • 返利是冲减收入吗
  • 预缴的城建税怎么做账
  • 如何pingip地址
  • 压缩文件损坏怎么回事
  • 建筑公司支付的预付款担保保函费怎么做账?
  • 企业清算剩余财产分配是否交个人所得税
  • 最早在哪一年手机可以上网
  • 自行建造完成交付的房子
  • flex布局子元素height100
  • js表单验证代码
  • 加计扣除减免政策
  • 贷方跟借方哪个是收入哪个是支出
  • 解决跨域问题的注解
  • 申报表已申报未交款后作废
  • webpack配置publicpath
  • js中数组方法有哪些
  • javascript中文手册
  • 小规模升级一般纳税人需要多久
  • 企业年度预算编制流程
  • 工资直接计入管理费用了怎么办
  • 企业年度报告包括哪些内容
  • 一般纳税人哪些行业可以简易计税
  • 预缴税款为什么不能跨月申报
  • python中事件处理的方法
  • python中类的属性
  • 织梦程序
  • python gitpython
  • sql数据库降低版本
  • 企业所得税固定资产的计税基础
  • 加工费计入什么科目制造企业成本
  • 无票收入要交企业所得税吗
  • 其他应付款里借方有余额代表什么
  • 招待费和差旅费的区别
  • 销售货物如何写凭证
  • 固定资产是指的什么
  • 企业账户里的政府账户
  • 企业清算未收到发票
  • 施工人员的工资计入
  • 利息税额计算公式
  • mysql 5.7.28安装
  • mysql密码忘了怎么办?
  • xp系统怎么创建本地连接2
  • wp7.8升级wp8
  • xp系统的启动快捷键
  • Win10预览版镜像
  • win10缺少文件如何修复
  • kb2859537是什么文件
  • js canvas压缩图片
  • unity3d 物体移动
  • nodejs.
  • node.js操作数据库报错不再队列中
  • javascript含义
  • jquery页面跳转的方法
  • jquery showloading
  • dom4j解析xml字符串步骤
  • 小规模纳税人开1%普票怎么报税
  • 山东省税务局网上办税服务厅
  • 复函地税务机关对自产货物原材料向上游发函
  • 国税和地税归哪里管
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设