VUE解决组件样式冲突的问题

已于 2023-03-02 11:07:50 修改
阅读量823 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 css
于 2022-12-30 14:42:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68658847/article/details/128495513
版权

在这里插入图片描述

如何解决?(less写法)

在style标签上加个scoped即可
在这里插入图片描述
原理:加上scoped就会自动为当前组件内的样式添加data-v-编码,属性,同时在标签内加上这种唯一的属性,可以控制台查看文档结构去检验
但是上面方法还是有缺陷的
上面方法可以解决组件内样式问题,但是对于它里面的复用的组件的样式完全不做改变,就是只改变它自己的样式,引用的样式没改变,这就是一种缺陷
例如这里的H5标签是引用的组件内的
在这里插入图片描述
它此时没有加上样式data-v-编码
那怎么能让复用的组件的标签有样式呢?
只需要在样式前面加个 /deep/ 即可
在这里插入图片描述

然后再浏览器看到以下样式(后代选择器,父标签下面有个H5,和刚刚的标签选择器不同了)
在这里插入图片描述
这种就能实现跨组件加样式了
当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到/deep/

纯css和sass写法

在这里插入图片描述

萧寂173
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 组件间的样式冲突污染
12-12
[removed][removed] ，在大多数情况下，我们希望组件间定义的样式是相互隔离的，在 Weex 当中的确如此，组件天生隔离，可是在 Vue 当中，运行的载体还是浏览器，所有的样式类还是会通过 style 标签插入头部，影响...
Vue 解决父组件跳转子路由后当前导航active样式消失问题
10-15
总的来说，解决Vue中父组件跳转子路由后导航active样式消失的问题，主要是通过调整CSS规则，确保`router-link-active`类能够覆盖所有匹配的路由，以及在使用第三方组件如Element UI时，正确地结合Vue Router动态设置...
vue中同一个页面多次复用同一个组件的相互干扰问题
热门推荐
weixin_47097870的博客
02-23 1万+
vue中同一个页面多次复用同一个组件的相互干扰问题
【Vue】同一个页面多次复用同一个组件数据相互干扰问题
qq_45677671的博客
10-13 3698
同一个页面多次复用同一个组件数据相互干扰问题
2024年前端最新VUE解决组件样式冲突的问题_复用组件数据冲突，拼多多面试官
最新发布
2401_84411822的博客
05-13 646
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
Vue笔记（一）
d_benhua的博客
09-16 812
一、Vue调用在线图标 1、在main.js文件中设置地址并注册图标。 2、在xxx.vue中使用图标组件。 二、ant-design-vue通过css修改a-tree的折叠打开图标 //修改树结构展开闭合图标 /deep/ .ant-tree li span.ant-tree-switcher{ width:16px; height:16px; margin:4px; // 修改树结构合起的icon &.ant-tree-switcher_close{ backgr
Vue同一路由多页面数据互相影响(已修复)
weixin_45330738的博客
12-27 2376
Vue同一路由多页面数据互相影响(已修复)
【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样
CLN1991的博客
08-25 5075
比如有现在有一个yanggb组件，我引入到我的页面中(创建了一个组件实例)，然后调用两次(在页面上调用组件实例两次)，那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了。而组件化的一个重要特性就是作用域隔离，即一个组件实例拥有一个私有的作用域，当在页面中引用了该组件之后，只有该组件实例能访问该作用域。
vue组件中的样式属性scoped实例详解
10-17
当 `style` 标签带有 `scoped` 属性时，这标志着其中的 CSS 样式仅应用于当前组件的元素，避免样式冲突和污染其他组件。 **Scoped CSS 规范** Scoped CSS 是一种 Web 组件的样式隔离机制，确保组件的 CSS 只对其...
解决vue+elementui项目打包后样式变化问题
10-15
在Vue项目中，我们通常会引入ElementUI这样的第三方UI框架，然后是自定义的组件样式。在开发环境中，由于热更新和按需加载，样式加载相对简单。但在打包过程中，Webpack会将所有CSS合并成一个或多个文件，这就可能...
vue组件与复用详解
10-18
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下
解决vue一个页面中复用同一个echarts组件的问题
10-15
主要介绍了解决vue一个页面中复用同一个echarts组件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 组件状态冲突
youngjqz的博客
04-16 5253
vue 组件状态冲突 在写vue组件Carousel 时,出现在同一个页面中多次使用同一个组件时的状态冲突,原因是过多的使用了JavaScript原生的DOM操作方式,修改使用vue中ref 操作DOM元素后,则此冲突消失; vue中对于ref的解释为:ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 D...
vue3通过v-for循环多次子组件，改变组件的个数，组件相互干扰
Xiao022353的博客
04-27 1350
我们一般v-for组件完后都是使用index来作为key的 但是，当我删除第一个组件的时候key为0，数组的第二个组件的key也会变成0，所以，因为key的赋值，导致数组的删除出现了data的值的混淆,我们只需要把 key 的值换一个item.XX就好了 不要用index 就行。
vue组件复用出现的一些问题
weixin_42157001的博客
11-03 1346
在项目开发中根据需求封装了一个组件，并且把跟组件相关的所有接口调用全部放在了该组件中执行，然后把这个组件引入到了父组件中，每当父组件初始化的时候，子组件里的接口都会被调用一次，后面由于需求的变更，在这个父组件中插入两次子组件。 好处是，提高了组件的复用性，减少了代码的编写； 缺点是，父组件初始化的时候会导致子组件中的接口双倍调用，就会引发性能问题； 解决方法是，将子组件用到的初始数据接口（初始数据接口也就是会在created或者mounte...
关于vue列表内使用同一个详情组件出现的bug以及 使用 element ui 的组件例子
weixin_45379180的博客
05-20 285
bug1、页面数据会缓存，点击不同列的数据 传值， 组件只会在第一次的时候进行 处理 ： 解决 ，在组件上 加 :key=“new Date()” 时间戳 参考： https://blog.csdn.net/weixin_43815091/article/details/123505634 <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible"> <Details:rows = "rows" :key="new
v-show条件渲染
xiaoxingxingzai的博客
08-27 3010
v-show条件渲染 1.另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： <h1 v-show="ok">Hello!</h1> 值0也表示false，其他数值表示true。 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 注意，v-show 不支持 <t...
vue打包组件样式丢失
07-10
4. 样式被局部化：Vue组件的样式可以使用scoped属性进行局部化，但这可能导致样式在组件外部无效。如果需要在组件外部使用样式，可以尝试移除scoped属性。 5. 样式冲突：如果组件中的样式与全局样式发生冲突，可能...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧寂173

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值