:slotted
<template>
<!-- App.vue--><Son ><div class="a">我要插入了</div></Son>
</template><script setup lang="ts">
import Son from './components/Son.vue'
</script><style></style>
<template>
<!-- Son.vue-->插槽:<slot></slot>
</template><script setup lang="ts"></script>
<style scoped>
:slotted(.a) {color: cadetblue;
}
</style>
:global
<template>
<!-- App.vue--><Son ><div class="a">我要插入了</div></Son>
</template><script setup lang="ts">
import Son from './components/Son.vue'
</script><style scoped>
:global(div) {color: aqua;
}
</style>
v-bind
<template>
<!-- App.vue--><div class="c1">动态css1</div><div class="c2">动态css2</div>
</template><script setup lang="ts">
import {ref} from "vue";
const style1 = ref('lightblue')
const style2 = ref({color: 'lightgreen'
})
</script><style scoped>
.c1 {color: v-bind('style1')
}
.c2 {color: v-bind('style2.color')
}
</style>
module
<template><!-- App.vue--><div :class="heo.c1">动态css1</div><div :class="[heo.c2, heo.c1]">动态css2</div>
</template><script setup lang="ts">
import {ref} from "vue";</script><style module="heo">
.c1 {color: lightblue
}.c2 {border: 1px solid black;
}
</style>
如果 module 没有指定名字<style module>
,则默认使用:class="$style.c1"
。
此外,他还有自定义hook useCssModule
。
:deep
:deep() 和 样式穿透