06.特殊CSS伪选择器

Posted 2022-08-08 @大迁世界

这节课，我们来看下 Vue3 中新出的一些特殊选择器。

插槽选择器

默认情况下，作用域样式不会影响到 ``渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。但使用:slotted` 伪类以确切地将插槽内容作为选择器的目标。

假设，我们有一个 User 组件，内容如下：

// User.vue
<template>
  <div class="user">
    <slot />
  </div>
</template>

<style scoped>
.user .userInfo
  color: red;

</style>

在 User 组件中，我们声明一个默认 插槽<slot />。然后我们在父组件中引入：

<template>
  <User>
    <div class="userInfo">小明</div>
  </User>
</template>

<script setup>
import User from \'./components/User.vue\'
</script>

运行：

发现，我们在 User 组件中样式中，让