当前位置：首页 > news >正文

vue3 布局样式的原理

news 2025/8/22 2:55:06

style scoped

<style scoped > 它的 CSS 只作用于当前组件中的元素，如果子组件只有一个根元素，也会被渗透
原理：
当我们再组建中使用scoped时，vue会自动为组件中所有元素生成一个随机的属性，形如：data-v-7a7a37b1，生成后，所有的选择器都会在最后添加一个[data-v-7a7a37b1],
.box -》box[data-v-7a7a37b1]，

<template><div class="box"><p>我是父组件</p></div>
</template>
<style scoped>.box{background:#ccc;}
</style>

在这里插入图片描述
注意：随机生成的属性，除了会添加到当前组件内所有元素上，也会渗透当前组件引入的其它组件的根元素上(单根情况会，多根情况不会渗透)，这样设计是为了，可以通过父组件来为子组件设置一些样式

:deep

希望将组件和引入的组件中的某个元素字体都设置为黄色
这时候用到 :deep()
父组件

<template><div class="box"><p>我是父组件</p><stylechild></stylechild></div>
</template><script setup lang="ts">
import stylechild from '../components/StyleChild.vue'
</script><style scoped>.box :deep(p){color: blue;}   /*没加deep之前 子组件不会变蓝，加上之后就会变蓝了*/
</style>

子组件

<template><div><p>我是子组件</p></div>
</template>

在这里插入图片描述

:global

全局选择器 :global(div)，如果给div设置样式，全局的div都会渗透这个样式
也可以新增一个
s

style module

css模块module，会自动的对模块中的类名进行hash化来确保类名的唯一性

<template><div :class="$style.box"><p>我是父组件</p><stylechild></stylechild></div>
</template><style module>.box {color: blue;}   /*没加deep之前 子组件不会变蓝，加上之后就会变蓝了*/
</style>