【Vue3】CSS 新特性

:slotted

  
    
      ���要插入了
    
  


import Son from './components/Son.vue'

  插槽：
  




:slotted(.a) {
  color: cadetblue;
}

:global

  
    
      我要插入了
    
  


import Son from './components/Son.vue'


:global(div) {
  color: aqua;
}

v-bind

  动态css1
  动态css2


import {ref} from "vue";
const style1 = ref('lightblue')
const style2 = ref({
  color: 'lightgreen'
})


.c1 {
  color: v-bind('style1')
}
.c2 {
  color: v-bind('style2.color')
}

module

  
  动态css1
  动态css2


import {ref} from "vue";


.c1 {
  color: lightblue
}
.c2 {
  border: 1px solid black;
}

如果 module 没有指定名字，则默认使用:。

此外，他还有自定义hook useCssModule。

:deep

:deep() 和 样式穿透