Vue3中插槽选择器和全局选择器

插槽选择器

使用场景: 要在定义插槽时定义样式

• 定义插槽

<template>
  <div>
    插槽
    <slot></slot>
  </div>
</template>

<script setup lang=ts>
  
</script>

<style scoped>
:slotted(.a){
  color: red
}
</style>

• 使用插槽

<template>
  <ASlot>
    <div class="a">百度</div>
  </ASlot>
</template>

<script setup lang=ts>
  import ASlot from '@/components/slottt/ASlot.vue';
</script>

<style scoped>
.a{
  color: blue;
}
</style>

显示内容为红色

注意,插槽目录不能使用slot,会导致样式不生效

全局选择器

1. 再增加style

<style >
div{
  color: red
}
</style>

2. 使用:global

<style scoped >
:global(div){
  color: red
}
</style>