vue3文件中 scoped 的作用及穿透

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

 

如果解决css的未生效的问题，可以使用>>>穿透

子组件

<template>
  <div class="navbar">
    <div class="left" @click="btnclick"><slot name="leftbar"></slot></div>
    <div class="center"><slot name="centerbar"><p>{{center_text}}</p></slot></div>
    <div class="right"><slot name="rightbar"></slot></div>
  </div>
</template>

　　

父组件：

<nav-bar path="/mine">
  <template v-slot:centerbar>{{shopcarttitle}}</template>
  <template v-slot:leftbar ><img :src="backhome" alt=""></template>
</nav-bar>
</template>

　　

父组件加载子组件，且在name=‘leftbar’ 的插槽(class=left)中插入了一个 <img>

此时在子组件的样式文件中对img 设置无法生效，应为有scoped

可以在子组件

  .left >>> img{
    width: 30px;
    height: 30px;
  }

　此时img 就能被限制大小了