【vue3】样式穿透、完整新特性、动态css、css-module

一、样式穿透

vue2里面使用 /deep/
vue3里面使用 :deep()

:deep(.el-input__inner){
	background-color: 'red';
}

1
2
3
4
5

二、完整新特性

:slotted()

//parent.vue
<template>
    <div>
        <p>这是父级</p>
        <span>==================================</span>
        <A>
        	<p class="red">这是父级传的插槽内容</p>
        </A>
    </div>
</template>
import A from '../components/A.vue';


//A.vue
<template>
    <div>这是A组件</div>
    <slot></slot>
</template>

<style scoped lang='scss'>
	:slotted(.red){
	    color: red;
	}
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

:global()
全局样式，跟不加scoped效果一样

<style scoped lang='scss'>
	:global(div){
	    color: pink;
	}
</style>

和<style ></style >一样的效果
1
2
3
4
5
6
7

三、动态css

<template>
    <div>
        <h1 class="box">
            动态css
        </h1>
    </div>
</template>


<script setup lang='ts'>
	import { ref } from 'vue'
	const style = ref({
	    color: 'green'
	})
	setTimeout(() => {
	    style.value.color = 'yellow'
	}, 2000);
</script >

<style scoped lang='scss'>
	.box {
	    color: v-bind('style.color');
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

四、css-module

单个：:class="$style.box"

多个：:class="[$style.box,$style.border]"

<h1 :class="[$style.box,$style.border]">
    css-module
</h1>

<style module>
	.box {
	    color: blue;
	}
	.border{
   	 	border: 1px solid red;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<h1 :class="[yyx.box,yyx.border]">
    css-module
</h1>

<style module='yyx'>
	.box {
	    color: blue;
	}
	.border{
   	 	border: 1px solid red;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14