Vue3样式渗透之deep()为什么无效详解

2024-10-03 10:56:23

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

:deep()的使用场景：

如果给当前组件的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中颜色的色块有两个。

附：vue3 :deep() 深度选择器使用

#swiper >.swiperContext :deep(p) {
  width: 100vw;
  height:60vw;
  background: #000;
  border:5px solid;
  box-sizing: border-box;
  color: #fff;
  border-radius: 5%;
}

总结

到此这篇关于Vue3样式渗透之deep()为什么无效的文章就介绍到这了,更多相关Vue3样式渗透deep()无效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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

之前在项目中用到了 vant,使用特别简单,而且组建也非常的丰富.即时这样,在项目中肯定也需要用额外的样式来打造自己的应用.直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式,但如果去掉scoped话又会影响全局样式.想了好多方法,都没得到很好的解决. 百度之后发现可以用 /deep/或::v-deep来解决***(不过在vue3.0的环境下,使用/deep/时,编译会报错)***.没想
Vue3样式渗透之deep()为什么无效详解

今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习. :deep()的使用场景: 如果给当前组件的style 节点添加了scoped 属性,则当前组件的样式对其子组件是不生效的.如果想让某些样式对子组件生效,则需要使用:deep(). 我原本觉得这个没有难度,于是写了个案例来验证.然后问题出现了,:deep()定义的样式在子组件中不起作用.我开始找错,把包括冒号.括号在内的语法格式等都检查了一遍,发现语法格式没有问题,控制台也
Vue2和Vue3如何使用watch侦听器详解

watch:侦听数据变化 (某个值的change事件) vue2.x data(){ return{ num:10 } }, watch:{ num:{ /* * newValue:当前值 * oldValue:修改上一刻的值 */ handler(newValue,oldValue){ // doSomething }, /* * deep:Boolean : 深度监听 * true: 监听堆的改变就 * false:只监听栈的改变(默认) */ deep:true/false, /* * i
Vue3.0版本强势升级点特性详解

目录一.Composition API: 组合API/注入API 二.自定义渲染API(Custom Renderer API) vue2.x架构问题三.更先进的组件 Fragment组件 Suspense组件四.更好的TS支持五.更快的开发体验(vite开发构建工具) 六.按需编译,体积比Vue2.x更小(Tree shaking) 七.性能比2.x快1.2-2倍 diff算法的优化 render阶段的静态提升(render阶段指生成虚拟dom树的阶段) 事件侦听缓存减少创建组件实例
Vue3 如何通过虚拟DOM更新页面详解

目录引言 Vue 虚拟 DOM 执行流程 DOM 的创建 patch 函数 patchElement 函数节点自身属性的更新子元素的更新 patchChildren 位运算为什么位运算性能更好如何运用位运算最长递增子系列贪心 + 二分引言上一讲我们主要介绍了 Vue 项目的首次渲染流程,在 mountComponent 中注册了effect 函数,这样,在组件数据有更新的时候,就会通知到组件的 update 方法进行更新 Vue 中组件更新的方式也是使用了响应式 + 虚拟 DO
利用Vue3实现可复制表格的方法详解

目录前言最基础的表格封装实现复制功能处理表格中的不可复制元素测试前言表格是前端非常常用的一个控件,但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的.同时,基础的 table 样式通常也是不满足需求的,因此一个好的表格封装就显得比较重要了. 最基础的表格封装最基础基础的表格封装所要做的事情就是让用户只关注行和列的数据,而不需要关注 DOM 结构是怎样的,我们可以参考 AntDesign,columns dataSource 这两个属性是必不可少的,代码如下:
Vue3和Electron实现桌面端应用详解

目录 Vue CLI 搭建Vue项目 Vue项目改造为markdown编辑器 Vue CLI Plugin Electron Builder 优化功能启动全屏显示修改菜单栏编辑器打开markdonw文件的内容 markdonw的内容存入文件打包为了方便记录一些个人随笔,我最近用Laravel和Vue 3.0撸了一个博客系统,其中使用到了一个基于markdown-it的 markdown 编辑器Vue组件v-md-editor.我感觉用它去编写markdown还是很方便的.后面就有了一个
Vue2.x与Vue3.x中路由钩子的区别详解

目录 vue2.x 前置概念: 路由钩子分类路由和组件的概念(方便理解钩子函数) 全局路由钩子路由配置守卫钩子组件内的守卫钩子路由钩子执行顺序 eg: 从A组件跳转到B组件顺序如果B路有更新, 每次都会执行以下三个钩子: vue3.x 对比变化图区别补充: vue2.x 前置概念: 路由钩子分类一共分3类, 7个钩子路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址组件是显示在网页上的不同内容全局路由钩子 router.befor
从web到内网渗透的一次过程详解

目录记一次从web到内网的渗透拓扑图环境介绍渗透过程 target1 target2 taget3 记一次从web到内网的渗透拓扑图环境介绍现在有三台机器,分别为target1,target2,target3,里面分别有三个flag,每个flag的分值不同,需要通过拿下一个已知IP(target1)进而向内网里面进行渗透,最终要成功获得三台主机权限渗透过程 target1 使用nmap进行扫描可以看到开启了80端口浏览器访问目标靶机80端口可以看到就是apache的默认页面
Vue3内置组件Teleport使用方法详解

目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置场景举例:一个 Button ,点击后呼出模态对话框这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间这样就有了一个问题:组件的
VUE3中watch和watchEffect的用法详解

watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default { setup() { const state = ref(0) watch(state, (newValue, oldValue) =>

Vue3样式渗透之deep()为什么无效详解

相关推荐

随机推荐