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

最新推荐文章于 2024-07-26 18:04:05 发布
原创 最新推荐文章于 2024-07-26 18:04:05 发布 · 745 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #前端

本文介绍了Vue中scoped属性用于实现组件样式的局部化，解析了它的工作原理，即通过data属性和CSS属性选择器结合实现。讨论了父组件如何影响子组件样式，并强调在同一个父组件内多个子组件的样式布局的重要性。同时，提到了使用::v-deep或>>>来穿透样式的作用，以及在必要时使用!important提高权重。

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

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

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

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

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

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

UniApp 样式穿透：`:deep`、`/deep/` 和 `::v-deep` 不生效的原因与解决方案
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-13 1403
在 UniApp 中，当我们需要修改子组件或第三方组件的样式时，、 和 是非常常见的工具。但是，有时这些样式穿透机制却不如我们预期那样生效，这往往是因为不同的技术栈、环境配置或代码书写习惯导致的。今天我将从自己的开发经验出发，详细分析这些问题的成因，并提出一些解决方案。在我开发的过程中，发现很多人会在样式穿透时出现问题，往往是因为不同的 CSS 预处理器对穿透样式的支持情况不同，尤其是 Sass 系列的预处理器。 2. 微信小程序中样式不生效问题 在开发微信小程序时，曾遇到过样式穿透不生效的情况。深入了
【Vue】＜style＞中的scoped和v-deep
等时钟成长
09-17 1309
Vue中<style>的scoped和v-deep 组件样式 在vue中，我们通过<template>写HTML，<script> 写JavaScript，而把样式放进<style>中。但是直接写在<style>中的css是全局的，不同组件间的样式会互相影响。所以组件内部的样式我们一般加上scoped标记，避免不同组件间样式的影响。但是有时候（例如引用第三方组件时）我们发现加了scoped的样式并不起作用，所以我们会有/deep/ 、>&gt
一文彻底搞懂vue中scoped与deep深度选择器
SmileLife123的博客
02-19 1693
1. css属性选择器是什么。 2. scoped的实现原理。 3.scoped产生的影响。 4.deep深度选择器原理是什么。
Vue scoped与深度选择器deep的原理
kb-8-24 的博客
11-06 1055
Vue scoped与深度选择器deep的原理
vue scoped及样式穿透（/deep/）
我的电脑会后空翻的博客
06-08 1226
vue scoped及样式穿透（/deep/）
scoped与/deep/
zpf_2017的博客
12-11 608
当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。使用scoped后，父组件的样式将不会渗透到子组件中。 你可以在一个组件中同时使用有作用域和无作用域的样式： <style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style> ...
[VUE]从scoped到::v-deep样式穿透
weixin_42274805的博客
03-16 1203
一、scoped 用法： <style scoped> ... </style> 解释： 模块样式私有化。style标签里的样式仅适用于当前组件。 缺陷： 只允许修改当前组件里的样式，修改不到当前组件里外部引用的组件的子组件元素样式。 缺陷举例： <tempalte> <div> <timeline /> </div> </template> <script&
vue样式穿透 ::v-deep的具体使用
10-15
以下是一些使用 `::v-deep` 的实例： 1. 当你的 `<style>` 标签语言设置为 CSS 时，可以这样使用： ```html <style lang="css" scoped> .a::v-deep .b { /* ... */ } ``` 2. 如果你使用的是预处理器如 SCSS，代码...
Vue随笔【::v-deep 解决 样式污染的bug】
Web人
07-20 733
Vue随笔【::v-deep 解决 样式污染的bug】
前端开发深入解析Vue中CSS深度选择器`::v-deep`：作用机制与应用场景探讨
最新发布
05-20
内容概要：本文主要介绍了Vue组件中scoped样式下的深度选择器，重点讲解了::v-deep。首先阐述了深度选择器出现的背景，即scoped样式默认只能作用于当前组件的DOM元素，不能影响子组件。然后分别解释了Vue2中使用>>>...
深度选择器/deep/、::v-deep、:deep的区别
qq_53911056的博客
03-29 4699
深度选择器/deep/、::v-deep、:deep，三个选择器都是用于穿透组件作用域并样式化子组件内部元素的。在 Vue.js 2中，可能更倾向于使用 /deep/；而在 Vue.js 3中，应该使用 ::v-deep 或其别名 :deep......
Vue scoped及deep使用方法解析
11-19
众所周知，在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染，scoped使得组件内的样式变成局域样式，只作用于当前组件。 原理如下——- 在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是,当父组件，子组件同时使用scoped属性时，子组件最外层的标签既会被加上当前组件的hash值，又会加上父级组件的hash值,像这样 //子组件最外层标签 <div data-
scoped 和 /deep/ 解决 css 冲突覆盖问题
lefex的博客
12-30 1424
上一节内容我们学习了 Vue 中使用 CSS 系统学习 vue 中使用 css 的各种方式，这节内容学习一下 scoped 和/deep/ 的作用：在 vue 中使用组件时，最怕 cs...
vue组件使用scoped实现组件的私有样式以及/deep/深度作用选择符
当幸福来敲门
05-14 745
一、scoped 默认组件style中定义的样式是全局的，在使用webpack打包时，存在相同名字覆盖的问题，为了解决多组样式名相同出现冲突的问题，此时就可以在style标签中加上scope属性。 原理： 在style中加上scoped属性，就会在此组件中的标签上加上一个随机生成以data-v开头的属性。而且必须是当前组件的元素或者子组件的根元素，才会有这个自定义的属性。 二、/deep/深度作用符 当父子组件都是用了scoped的情况下，如何在父组件中控制子组件的样式，这个时候就可以用到 /deep/
vue中scoped详解以及样式穿透＞＞＞、/deep/、::v-deep
j15087159186的博客
07-26 2181
scoped详解以及样式穿透>>>、/deep/、::v-deep，详细分析scoped的原理以及穿透样式的原理
vue组件的样式穿透 /deep/ ::v-deep的使用
weixin_67490903的博客
08-04 2406
1.我们在开发过程中，会使用很多组件，也会出现组件服用的情况，我们在书写组件时，往往会在style样式中使用scoped属性，表明样式只在当前组件生效，很好的实现了样式私有化的目的，避免了样式之间的互相污染与冲突。2.但是我们在使用可复用性组件的时候，往往不可避免的遇到组件相同而样式不同的情况。这时我们就需要样式穿透，在父组件中写样式来作用在子组件身上，或者作用在孙子组件上，可跨越多个组件。然后父组件引入子组件、注册、使用。此时孙子组件背景颜色变为红色。此时孙子组件背景颜色变为粉色。5.爷孙组件样式穿透。.
vue样式穿透::v-deep和/deep/和:deep的具体使用-案例
JackieDYH的博客
06-21 5586
在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。 搜索之后发现 可以用 /deep/或::v-deep来解决***（不过在vue3.0的环境下，使用/deep/时，编译会报错） ...
::v-deep—改变局部样式scoped，但全局样式不变
爱意迷了眼丶的博客
05-22 670
有什么方法能在父组件的css里影响子组件的样式，同时保留scoped呢？就可以了，但是去掉scoped同时也会导致其他问题，可能会影响到别的。属性，会使写的样式只影响当前的组件，不会影响到子组件。使用方法：在想要影响子组件的那个元素的选择器的前边加上。我们知道，在Vue组件的style标签里，加上。兼容性最强， 优先使用这个。deep有两种写法，
vue中css ::v-deep
03-19
当在一个带有 `scoped` 属性的 `<style>` 标签中定义样式时，可以通过以下形式使用 `::v-deep`： ```css <style scoped> .parent-class ::v-deep .child-class { color: red; } ``` 上述代码表示 `.parent-class...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值