Vue中关于scoped以及scoped样式穿透的原理与使用详解

1. scoped

当多个组件中有相同的元素或相同的类名时,在其中一个组件中更改该元素的样式,会导致所有组件中的样式更改,造成样式污染,若只想该样式在当前组件生效就需要用到scoped

示例

组件demo与demo2

<template><div><h1>demo</h1></div>
</template>

在App.vue中导入组件demo与demo2,此时页面为
在组件demo中更改h1的样式,此时两个组件中的h1标签都变为橙色

<template><div><h1>demo</h1></div>
</template>
<style>
h1{color: orange;
}
</style>

解决办法

若只想要demo中的h1样式改变,需在demo中的style标签中添加scoped属性

<template><div><h1>demo</h1></div>
</template>
<style scoped>
h1{color: orange;
}
</style>

实现原理

给组件中的每个标签添加一个data-v-xxxx属性
给<style scoped>标签中的每个选择器的最后一个选择器添加对应data-v-xxxx属性的属性选择器(指如果选择器是复合的如div h1,则给h1添加属性选择器)

2. scoped样式穿透

使用scoped会导致一个问题,就是若在当前组件引入一个新的组件,更改新的组件中元素的属性是无法生效的

示例

组件child

<template><div><h2>child</h2></div>
</template>

在demo中引入组件child并更改child中h2的样式,此时样式是不生效的

<template><div><h1>demo</h1><child class="child"></child></div>
</template>
<script>
import child from "./child.vue";
export default {components: {child,},
};
</script>
<style scoped>
h1{color: orange;
}
.child h2 {color: aqua;
}
</style>

这是由于scoped属性为child第一层元素div添加了data-v-xxxx属性并未给h2添加属性,却在符合选择器中最后一个选择器.child h2的h2后添加属性选择器所导致的

解决办法

使用scoped样式穿透,在选择器.child h2的.child后添加

>>>
/deep/
::v-deep

<template><div><h1>demo</h1><child class="child"></child></div>
</template>
<script>
import child from "./child.vue";
export default {components: {child,},
};
</script>
<style scoped>
h1{color: orange;
}
.child >>> h2 {color: aqua;
}
</style>

实现原理

>>>, /deep/, ::v-deep放在谁的后面，属性选择器就加在哪个选择器的后面

Vue中关于scoped以及scoped样式穿透的原理与使用详解相关推荐

Vue中使用使用内联样式
Vue中使用使用内联样式 Vue中使用内联方式的3中方式 1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义到data中,再引用 3.使用数组,引用多个data上的样式对象 Vu ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
vue ajax拦截器,Vue-resource拦截器判断token失效跳转详解
本文主要为大家带来一篇Vue-resource拦截器判断token失效跳转的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 在拦截器中设置全局的 ...
php self this static,PHP 中 self、static、$this 的区别和后期静态绑定详解
本篇文章给大家分享的内容是关于PHP 中 self.static.$this 的区别和后期静态绑定详解,有着一定的参考价值,有需要的朋友可以参考一下 self.static 和 $this 的区别为 ...
java构造块_java中的静态代码块、构造代码块、构造方法详解
运行下面这段代码,观察其结果: package com.test; public class HelloB extends HelloA { public HelloB() { } { System. ...
（转）web.xml 中的listener、 filter、servlet 加载顺序及其详解
转: https://www.cnblogs.com/Jeely/p/10762152.html web.xml 中的listener. filter.servlet 加载顺序及其详解一.概述 1. ...
nmmqq.php?/lspc.html,html中的图片直接使用base64编码后的字符串代替详解
网页中的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme,下面有个不错的示例,大家可以参考下最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看 ...
Java中常见RuntimeException与其他异常表及Exception逻辑关系详解
Java中常见RuntimeException与其他异常表及Exception逻辑关系详解前言常见`RuntimeException` 其他错误类型 `Error`类 `Exception`类 E ...
python使用视频_Python中操作各种多媒体,视频、音频到图片的代码详解
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...

Vue中关于scoped以及scoped样式穿透的原理与使用详解

1. scoped

示例

解决办法

实现原理

2. scoped样式穿透

示例

解决办法

实现原理

Vue中关于scoped以及scoped样式穿透的原理与使用详解相关推荐

最新文章

热门文章