vue3 布局样式的原理

news2025/1/17 3:17:31

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>