vue项目中的style加上scoped后(样式穿透)

最新推荐文章于 2024-02-03 17:32:58 发布
最新推荐文章于 2024-02-03 17:32:58 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43310551/article/details/88864833
版权

为了vue页面样式模块化，不对全局造成污染，建议每个页面的style标签加上scoped，表示他的样式只属于当前的页面，父组件的样式不会泄漏到子组件中，就是只加载以及影响当前的组件，通过这个属性。但是scoped也会造成一些额外的负担，如无法覆盖原有组件的样式。但是往往有时候，我们在使用一些第三方插件的同时，又需要对第三方插件做一些细微的修改，那么我们就可以加 /deep/() 或者 >>>，设置样式穿透当前作用域。如下图，css和scss使用 >>>,less使用/deep/

加了scoped限制后，里面的样式优先级就比其默认样式优先级低。比如openlyers或者cesium带的一些默认的控件，都i有默认的样式，如果你在页面修改这个控件的样式，加了scoped局部限制后，你写的样式是没有效果的

在这里插入图片描述

江南Code
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈vue中慎用style的scoped属性
08-28
本篇文章主要介绍了浅谈vue中慎用style的scoped属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中的scoped实现原理及穿透方法
08-27
主要介绍了Vue中的scoped实现原理及穿透方法,本文通过实例文字相结合的形式给大家介绍的非常详细，需要的朋友可以参考下
前端学习之路(5) vue样式穿透
最新发布
qq_32907491的博客
02-03 696
vue的style中设置scoped属性后，组件实现样式私有化。但是该组件又使用的其他组件库时(vant,elementui,自定义等)，该组件的style中的样式，优先级低，不生效，这个时候需要使用样式穿透(作用得更深)。
浅谈关于.vue文件中style的scoped属性
08-29
本篇文章主要主要介绍了浅谈关于.vue文件中style的scoped属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue文件style中引入scss
一呀一转转圈
10-27 6083
index.vue文件中，引入scss文件，要加波浪线“~”，否则会报错。 scoped代表局部，scss仅限当前文件使用 <template> </template> <style lang="scss" scoped> @import "~assets/scss/mixins"; <!--这里引入要加 "~", 否则会报错--> </style>--> ...
vue ＜style＞标签的scoped 属性
灵活的小胖子
08-08 909
大家都知道<style> 标签是用来设置浏览器中如何呈现HTML的，也就是设置CSS样式的，但是当我们在<style>标签里加上scope的是什么意思呢？ "scoped" 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。 <style> 标签有 scoped 属性时表示它的样式作用于当...
关于vue中采用scoped时，组件的中css优先级
haonan_z的博客
03-01 1650
总结： 当我们的style里面写上scoped时，会给class加上命名的哈希值，否则是全局样式覆盖 首先我们思考一下vue的生命周期里说的，挂载的时候是从里到外，那么组件里的哈希值的class也是由里到外创建，此时父组件的class会写在子组件后面，所以当两个class在同一个元素上时，父组件的class会覆盖子组件的class vue2中template里面只能有一个元素，我们称之为根元素，vue3中可以有多个元素，所以说vue3中组件可以没有根元素；如果有根元素存在的情况下，父组件中子组件的元素上面
Vue组件之style - lang - scoped 和 vue模板 sass安装
weixin_47409897的博客
08-28 4840
目录Vue组件之style - lang - scopedvue模板 Vue组件之style - lang - scoped lang 这是标明你书写css的样式类型 有着 scss css less 默认是css <style lang="scss"></style> scoped 作用：就是设置当前组件的样式，只能在当前组件起作用 注意点：就是别的组件修改当前组件的时候，是默认不课被修改的！ 原因： 这是因为webpack打包的时候，会把js,css等文件一起打
vue 中使用 scss,解决style 使用lang = ‘scss’ 报错
King Saj
03-20 3201
<style lang="scss" rel="stylesheet/scss" scoped> @import "../assets/style/theme"; @import "../assets/style/mixin"; </style>
Vue框架中style标签的scope和lang属性以及样式穿透
XYQ689的博客
03-14 4235
在使用vue框架的时候，给style标签添加scoped属性，表示该style标签所包含的样式仅仅作用于当前的vue组件，不会产生样式全局污染的情况，一个应用中所有vue组件都加上该属性，则实现了样式的模块化。 &lt;style scoped&gt; /** 组件样式 */ &lt;/style&gt; 实现原理： 1、vue会给每个组件中HTML的DOM节点添加一个组件间不重复...
vue中css样式冲突的解决方法——scoped
qq_64037242的博客
11-29 719
才会有这个自定义属性, 才会被这个样式作用到。→ 因此很容易造成多个组件之间的样式冲突问题。: 默认组件中的样式会作用到全局。组件的样式冲突 scoped。[data-v-hash值]可以让样式只作用于当前组件。2. css选择器都被添加。data-v-hash值。当前组件内标签都被添加。：写在组件中的样式会。必须是当前组件的元素。
详解Vue中的scoped及穿透方法
10-17
主要介绍了Vue中的scoped及穿透方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式
小哈力----一个小前端工程师
07-08 3094
vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式 文章目录vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式概述需求问题描述解决办法添加样式前添加样式后在线demo完整代码（需安装了scss和iview组件）其他关于scoped的介绍 概述 项目中使用了scss预处理器（使用其他预处理的同理）和第三方ui组件iview进行表格美化。 需求 需要将数据表“净值估算”列负数标注为绿色，正数标注为红色，字体加粗； 排
【Vue基础】关于Vue中CSS的scoped属性作用域与样式穿透
DrLemonPie的博客
04-02 3382
scoped 在了解scoped属性之前，先了解一下Vue（中的插件）在渲染DOM时干了什么。Vue在渲染DOM后会在DOM节点上生成一个随机串data属性，这一属性给了当前组件下的DOM一种唯一标识。 当在style标签中加入scoped属性后，在页面渲染完毕后，style下所有的CSS都会自动转换，在过滤器上添加与DOM相同的data属性值。也就是说，从结果来看，scoped属性让CSS只对当前组件中的元素起作用，防止了CSS全局污染。 要注意，scoped修饰后的CSS过滤器只对编译器中写入的元素起作
vsCode中的css代码提示reference怎么关闭？
闪电⚡之王的博客简介
11-20 1604
打开设置搜索Volar › Code Lens: References，将其取消勾选即可
vue中使用scoped后意外出现的样式穿透问题
masierty的博客
08-01 526
scoped的原理就算给当前作用域里的DOM节点加一个不重复data属性，编译后的样式里加一个当前组件的data属性选择器来实现组件间样式的互不干扰。**问题描述**我父组件中使用了一个和子组件根元素一样的class，然后在添加了scoped的前提下，子组件样式被父组件修改了，为此我自己研究并总结了一下，有问题欢迎指出。1.当父组件里的class中有和子组件的根元素上的class一样的时，可以在父组件里用那个class控制子组件根元素的样式。结果就算父组件上的用class定义的样式修改了子组件上的样式。..
第三方组件库的样式优先级 scoped 的作用 样式穿透 内联样式
Farewell_w的博客
08-17 1028
文章目录1. scoped 的作用2. 样式穿透3. 样式穿透和内联样式 我们在使用第三方组件库的样式的时候，往往会需要根据自身需求来修改组件的默认样式。 我们在使用第三方组件库的时候，我们自己写的组件的样式出现在前面，而插件（第三方组件库）的样式会从后面进来，会覆盖掉我们写的样式，所以如果我们直接给这个组件添加类和样式，是不能成功修改组件原有的样式的。 1. scoped 的作用 scoped 只针对当前组件生效，不污染全局样式 举个例子，如果我在 home.vue 这个组件中编写如下 <tem
scoped样式修饰符的使用
IT小辉同学
09-04 328
想走在那城南的小巷，去探访青砖绿瓦的墙......
vue css样式穿透
零凌林的博客
10-26 1519
本文针对css样式的穿透修改进行一个简易的总结,后续如有其他便捷的样式穿透方式,会继续进行补充
vue scoped样式穿透父组件
08-08
在Vue中，scoped样式是一种给组件的样式添加作用域的方式，让样式在组件内起作用，不会影响到其他组件。然而，有时候我们希望某个组件的样式作用于其子组件或者父组件，这就需要穿透scoped样式。 对于子组件，我们可以通过使用`/deep/`或者`>>>`来穿透scoped样式。例如，在父组件的样式中，可以这样定义： ``` <style scoped> .parent /deep/ .child { color: red; } </style> ``` 在上面的例子中，`.parent`是父组件的样式，而`.child`是子组件的样式。使用`/deep/`可以让`.child`样式作用于子组件。 对于父组件，如果想要穿透scoped样式，可以通过将样式定义在全局样式中，或者使用`>>>`。例如，在子组件中，可以这样定义： ``` <template> <div class="parent"> <div class="child">子组件样式</div> </div> </template> <style scoped> .child { color: red; } .parent >>> .child { color: blue; } </style> ``` 在上面的例子中，`.child`是子组件的样式，`.parent`是父组件的样式。使用`>>>`可以让`.child`样式作用于父组件。 需要注意的是，`/deep/`和`>>>`只在一些支持CSS Modules的构建工具中生效，例如vue-loader。如果在其他环境中使用，可能无法生效。 总结：通过使用`/deep/`或者`>>>`，我们可以穿透Vue的scoped样式，让样式作用于子组件或者父组件。但是需要注意，这种方式只在部分构建工具中生效，不同环境可能会有差异。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值