在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 就能被限制大小了