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