这节课,我们来看下 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'
</scri