slotted()、style module、global、style v-bind

<template>

  <slotComponent>

    <template v-slot><div class="demo">789</div></template>

  </slotComponent>

  <h1 class="colorBlue">ref变量直接在style中通过v-bind使用</h1>

  <h1 class="colorGreen">reactive变量直接在style中通过v-bind使用</h1>

  <div :class="$style.colorYellow">

    使用style的module属性,通过$style取类变量名

  </div>

  <div :class="[$style.colorYellow,$style.border]">

    也可以用数组格式

  </div>

  <div :class="lq.font">

    也可以自定义module名字，通过自定义名字获取类变量名

  </div>

  </template>

 

  <script setup lang='ts'>

  import { ref, reactive, useCssModule } from 'vue'

  import slotComponent from './component.vue'

 

  const fontBlue = ref('blue')

  const fontObjGreen = reactive({

    colorGreen: 'green'

  })

 

  // 不写默认获取匿名module变量

  const a = useCssModule()

  console.log("%c Line:29 🌭 a", "color:#7f2b82", a);

  // 能够获取style的module属性是lq的类名

  const lq = useCssModule('lq')

  console.log("%c Line:29 🥖 lq", "color:#ffdd4d", lq);

  </script>

 

  <style scoped lang='scss'>

  // 针对该页面添加全局样式，能够影响到子组件

  :global(div) {

    color: pink;

  }

  // ref变量通过v-bind直接使用

  .colorBlue {

    color: v-bind(fontBlue);

  }

  // reactive需要引号使用

  .colorGreen {

    color: v-bind('fontObjGreen.colorGreen');

  }

  </style>

 

  <style module>

    .colorYellow {

      color: yellow;

    }

    .border {

      border: 1px solid yellow;

    }

  </style>

 

  <style module="lq">

    .font {

      font-weight: bold;

    }

 

  </style>

 

<template>

<div>

  我是插槽

  <slot></slot>

</div>

</template>

<script setup lang='ts'>

import { ref, reactive } from 'vue'

</script>

<style scoped lang='scss'>

// 可以给父组件的插槽添加样式，.demo是父组件的类名

:slotted(.demo) {

  color: red;

}

</style>