【vue3】样式穿透、完整新特性、动态css、css-module
一、样式穿透
vue2里面使用 /deep/
vue3里面使用 :deep()
:deep(.el-input__inner){background-color: 'red';
}二、完整新特性
: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>:global()
全局样式，跟不加scoped效果一样
<style scoped lang='scss'>:global(div){color: pink;}
</style>和<style ></style >一样的效果
三、动态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>四、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>
<h1 :class="[yyx.box,yyx.border]">css-module
</h1><style module='yyx'>.box {color: blue;}.border{border: 1px solid red;}
</style>