在使用vue scoped 和 ::v-deep 的一些感受

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

使用过Vue的同学都知道 在不同的组件内难免会用到相同的类样式或者ID样式，为了不影响其它组件的样式，我们会在头部加上scoped 标记 ，就像这样
在这里插入图片描述
它的原理就是在html标签上添加data-v-xxxxxxxx属性，然后在css类名后添加属性选择器，即利用css类选择 + 属性选择器实现样式局部化。。
关于scoped的使用需要注意一下几点：

1. 并不是所有的css都能私有化，

一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。**
**所以在同一个父组件中多个子组件的布局理解这一点很重要！！！

2.scoped配合::V-deep的使用

当父子组件都有scoped时，在父组件去修改子组件样式时，需要加上::V-deep 或者 >>> 来穿透样式
在这里插入图片描述

如果没有效果就需要加上 !important 来提高权重

笑傲江湖、
关注
scoped 和 /deep/ 解决 css 冲突覆盖问题
lefex的博客
12-30 1358
上一节内容我们学习了 Vue 中使用 CSS 系统学习 vue 中使用 css 的各种方式，这节内容学习一下 scoped 和/deep/ 的作用：在 vue 中使用组件时，最怕 cs...
【Vue】＜style＞中的scoped和v-deep
等时钟成长
09-17 1212
Vue中<style>的scoped和v-deep 组件样式 在vue中，我们通过<template>写HTML，<script> 写JavaScript，而把样式放进<style>中。但是直接写在<style>中的css是全局的，不同组件间的样式会互相影响。所以组件内部的样式我们一般加上scoped标记，避免不同组件间样式的影响。但是有时候（例如引用第三方组件时）我们发现加了scoped的样式并不起作用，所以我们会有/deep/ 、>&gt
scoped与/deep/
zpf_2017的博客
12-11 567
当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。使用scoped后，父组件的样式将不会渗透到子组件中。 你可以在一个组件中同时使用有作用域和无作用域的样式： <style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style> ...
[VUE]从scoped到::v-deep样式穿透
weixin_42274805的博客
03-16 1124
一、scoped 用法： <style scoped> ... </style> 解释： 模块样式私有化。style标签里的样式仅适用于当前组件。 缺陷： 只允许修改当前组件里的样式，修改不到当前组件里外部引用的组件的子组件元素样式。 缺陷举例： <tempalte> <div> <timeline /> </div> </template> <script&
vue组件使用scoped实现组件的私有样式以及/deep/深度作用选择符
当幸福来敲门
05-14 687
一、scoped 默认组件style中定义的样式是全局的，在使用webpack打包时，存在相同名字覆盖的问题，为了解决多组样式名相同出现冲突的问题，此时就可以在style标签中加上scope属性。 原理： 在style中加上scoped属性，就会在此组件中的标签上加上一个随机生成以data-v开头的属性。而且必须是当前组件的元素或者子组件的根元素，才会有这个自定义的属性。 二、/deep/深度作用符 当父子组件都是用了scoped的情况下，如何在父组件中控制子组件的样式，这个时候就可以用到 /deep/
vue样式穿透 ::v-deep的具体使用
10-15
以下是一些使用 `::v-deep` 的实例： 1. 当你的 `<style>` 标签语言设置为 CSS 时，可以这样使用： ```html <style lang="css" scoped> .a::v-deep .b { /* ... */ } ``` 2. 如果你使用的是预处理器如 SCSS，代码...
深度选择器{/deep/ ； ＞＞＞ ； ::v-deep }在vue前端项目中使用注意事项
m0_49714202的博客
02-25 939
官网地址:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8 >>> 在vue中需要去掉 lang 就是原生写法css /deep/ 可以在vue中加lang的css预处理器加less和scss, 用的时候有时会报错 ::v-deep 也可以在vue中加lang的css预处理器加less和s
解决vue加scoped后就无法修改vant的UI组件的样式问题
11-19
3. **`scoped`的影响**：理解`scoped`的作用，知道如何使用深度选择器（`/deep/`或`::v-deep`）来影响子组件的样式。 4. **iOS上的输入框放大**：在iOS设备上，输入框可能因缩放问题显得过大，可以通过设置`<meta>`...
vue 深度作用选择器 ＞＞＞、/deep/、::v-deep
weixin_41549971的博客
02-01 1492
vue 深度作用选择器 ＞＞＞、/deep/、::v-deep
Vue scoped及deep使用方法解析
11-19
众所周知，在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。 原理如下——- 在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是,当父组件，子组件同时使用scoped属性时，子组件最外层的标签既会被加上当前组件的hash值，又会加上父级组件的hash值,像这样 //子组件最外层标签 <div data-
vue中scoped详解以及样式穿透＞＞＞、/deep/、::v-deep
最新发布
j15087159186的博客
07-26 1373
scoped详解以及样式穿透>>>、/deep/、::v-deep，详细分析scoped的原理以及穿透样式的原理
vue组件的样式穿透 /deep/ ::v-deep的使用
weixin_67490903的博客
08-04 2265
1.我们在开发过程中，会使用很多组件，也会出现组件服用的情况，我们在书写组件时，往往会在style样式中使用scoped属性，表明样式只在当前组件生效，很好的实现了样式私有化的目的，避免了样式之间的互相污染与冲突。2.但是我们在使用可复用性组件的时候，往往不可避免的遇到组件相同而样式不同的情况。这时我们就需要样式穿透，在父组件中写样式来作用在子组件身上，或者作用在孙子组件上，可跨越多个组件。然后父组件引入子组件、注册、使用。此时孙子组件背景颜色变为红色。此时孙子组件背景颜色变为粉色。5.爷孙组件样式穿透。.
vue样式穿透::v-deep和/deep/和:deep的具体使用-案例
JackieDYH的博客
06-21 5145
在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。 搜索之后发现 可以用 /deep/或::v-deep来解决***（不过在vue3.0的环境下，使用/deep/时，编译会报错） ...
::v-deep—改变局部样式scoped，但全局样式不变
爱意迷了眼丶的博客
05-22 554
有什么方法能在父组件的css里影响子组件的样式，同时保留scoped呢？就可以了，但是去掉scoped同时也会导致其他问题，可能会影响到别的。属性，会使写的样式只影响当前的组件，不会影响到子组件。使用方法：在想要影响子组件的那个元素的选择器的前边加上。我们知道，在Vue组件的style标签里，加上。兼容性最强， 优先使用这个。deep有两种写法，
::v-deep 是一个特殊的深度作用选择器，它只在scoped样式中起作用，并且可以将CSS规则应用于当前组件及其所有子组件中匹配选择器的元素
qq_41685957的博客
10-26 429
:v-deep 是一个特殊的深度作用选择器，它只在scoped样式中起作用，并且可以将CSS规则应用于当前组件及其所有子组件中匹配选择器的元素。例如，.foo::v-deep .bar 会选择包含class为"bar"的元素的所有嵌套层次结构，但仅对 .foo组件的样式生效。例如，.foo :deep(.bar)会选择包含class为"bar"的元素的所有嵌套层次结构。在Vue中，::v-deep 和 :deep() 都用于修改CSS选择器的作用域。
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
12-22 4427
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加深度作用选择器 /deep/和>>>和::v-deep 使用了外届的组件或者自己开发一个组件，修改一处就可能会影响到用这个组件的所有样式，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。/deep/就能实现
vue中::v-deep的用法
...
03-04 3710
在Vue中，::v-deep是一个用于穿透作用域样式的特殊选择器。
在vue3中:：v-deep已经被废弃了吧
05-26
/* 在 Vue 3 中使用 ::v-deep */ .parent ::v-deep .child { color: red; } /* Vue 3 推荐使用 >>> */ .parent >>> .child { color: red; } ``` 请注意，`>>>` 选择器只能在一些特定的情况下使用，例如在单文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值