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放在谁的后面，属性选择器就加在哪个选择器的后面
