.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>