.vue文件 加scoped 樣式不起做用

淺談關於.vue文件中的style的scoped屬性

注意：scoped做用：使得.vue中的樣式不影響其餘.vue組件樣式，而不是scoped使得.vue組件樣式不受外樣式影響。

一、在vue組件中，爲了使樣式私有化（模塊化），不對全局形成污染，在style標籤上添加scoped屬性，以表示它只屬於當下的模塊。可是要慎用，由於在咱們須要修改公共組件（第三方庫或者項目中定製的組件）的樣式的時候，scoped會形成不少困難，組要增長額外的複雜度。

1、建立公共組件button：

//button.vue
<template>
  <div class="button-warp">
    <button class="button">text</button>
  </div>
</template>
...
<style scoped>
  .button-warp{
    display:inline-block;
  }
  .button{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
  }
</style>

瀏覽器渲染後的button組件爲:

<div data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
</div>
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}

從上面的結果能夠看出，添加了scoped屬性的組件，作了以下操做：

（1）、給HTML的DOM節點增長一個不重複的data屬性。（如：data-v-2311c06a）
（2）、在每句css選擇器的末尾（編譯後生成的css語句）加一個當前組件的data屬性選擇器(如：data-v-2311c06a)來私有化樣式。

2、在 " 不使用 " scoped的組件中引用button組件：

//content.vue
<template>
  <div class="content">
    <p class="title"></p>
    <!-- v-button假設是上面定義的公共組件 -->
    <v-button></v-button>
  </div>
</template>
...
<style>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
  .content .button{
    border-raduis: 5px;
  }
</style>

瀏覽器渲染出來的結果是：

<div class="content">
  <p class="title"></p>
  <!-- v-button假設是上面定義的組件 -->
  <div data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </div>
</div>
/*button.vue渲染出來的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出來的css*/
.content{
  width: 1200px;
  margin: 0 auto;
}
.content .button{
  border-raduis: 5px;
}

雖然，在content組件中修改了button的border-radius屬性，可是因爲權重關係，生效的依然是組件內部的樣式（即.button[data-v-2311c06a]定義的樣式）， 若是此時仍需修改樣式，則鼻血加劇咱們須要修改的樣式的權重。

3、在 " 使用 " scoped的組件中引用button組件：

//content.vue
<template>
  <div class="content">
    <p class="title"></p>
    <!-- v-button假設是上面定義的公共組件 -->
    <v-button></v-button>
  </div>
</template>
...
<style scoped>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
  .content .button{
    border-raduis: 5px;
  }
</style>

瀏覽器渲染的結果是：

<div data-v-57bc25a0 class="content">
  <p data-v-57bc25a0 class="title"></p>
  <!-- v-button假設是上面定義的組件 -->
  <div data-v-57bc25a0 data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </div>
</div>
/*button.vue渲染出來的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出來的css*/
.content[data-v-57bc25a0]{
  width: 1200px;
  margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
  border-raduis: 5px;
}

雖然，咱們在content添加了scoped屬性，可是.content .button 這句末尾添加的是content的scoped標記，最後咱們其實是找不到向對應的DOM節點的，也就不起做用啦。

解決辦法：

在content.vue文件中添加兩個style樣式：

//content.vue
<template>
  <div class="content">
    <p class="title"></p>
    <!-- v-button假設是上面定義的組件 -->
    <v-button></v-button>
  </div>
</template>
...
<style scoped>
  //針對content組件內部的樣式
  .content{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<style>
   //針對公共組件的樣式
  .content .button{
    border-raduis: 5px !important;
  }
</style>