vue使用样式

vue3样式新特性

• 全局样式

:global(选择器){
    height: 20px;
}

• 样式穿透

:deep(子组件中的选择器){}
:deep(.son > div){
    height: 20px;
}

// 在vue2中
scss使用::v-deep
less使用/deep/
css使用>>>

• 插槽样式(样式写在插槽的定义组件中)

:slotted(选择器){
    height: 20px;
}

• 动态样式

<script setup>
const height = ref('10px')
const obj = reactive({height: '20px'})
 
<style scoped>
div{
   height: v-bind(height)
   height: v-bind('obj.height') 
}

---

scoped及样式穿透原理

- style中加scoped样式分离
1、为组件实例生成唯一标识，给组件中每个标签对应的dom元素添加一个标签属性，data-v-xxx
2、给style scoped中的每个选择器的最后一个选择器添加一个属性选择器，如：
.container #id div => .container #id div[data-v-xxx]

- 样式穿透：用了样式穿透后的选择器最后就不会加标识了

子组件
<template>
	<div class="son">
		<h1>ssoonn</h1>
	</div>
</template>

父组件
<template>
	<div class="father">
		<Son/>
	</div>
</template>
<style scoped lang="less">
.father /deep/ .son > h1{
	color: red;
}
// 浏览器中
.father[data-v-fatherhash] .son > h1{color: red}