Scoped和样式穿透

最新推荐文章于 2024-05-23 23:37:52 发布

monana6

最新推荐文章于 2024-05-23 23:37:52 发布

阅读量373

点赞数

分类专栏： Vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wu_whitehyacinth/article/details/127654471

版权

Vue3 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Scoped和样式穿透

一般我们写组件，给每个组件写样式的时候都会加上scope，scope的作用就是在dom结构以及css样式上添加一个唯一的data-v-hash的标记（这个过程是由PostCSS转化实现的），进而实现样式私有化

但是对于修改Element ui 的样式，当我们在加上Scoped 直接修改是不能修改成功的，这就是PostCSS在转化的时候，把元素选择器放在了最后，为了解决这一问题，我们就要使用样式穿透，:deep() ，作用就是修改属性选择器的位置

<style scoped>
    :deep(input){

    }
</style>

此外还有两个选择器：

插槽选择器

我们可以使用插槽选择器修改父级的传过来的样式

A 组件定义一个插槽

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


<script>
export default {}
</script>
<style scoped>

</style>

在App.vue 引入

<template>
    <div>
        <A>
            <div class="a">私人定制div</div>
        </A>
    </div>
</template>


<script setup>
import A from "@/components/A.vue"
</script>

<style lang="less" scoped>
</style>

使用插槽选择器在A组件修改class a 的颜色

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

全局选择器

在之前我们想加入全局样式通常都是新建一个style 标签不加scoped 现在有更优雅的解决方案

<style lang="less" scoped>
:global(div){
    color:red
}
</style>

动态 CSS

单文件组件的

<template>
    <div class="div">
       小满是个弟弟
    </div>
</template>
<style lang="less" scoped>
.div{
   color:v-bind(red)
}

如果是对象 v-bind 请加引号

<script lang="ts" setup>
import { ref } from "vue"
const red = ref({
    color:'pink'
})
</script>
<style lang="less" scoped>
.div {
    color: v-bind('red.color');
}
</style>