.vue文件 加scoped 样式不起作用的解决方法


            浅谈关于.vue文件中的style的scoped属性



注意：scoped作用：使得.vue中的样式不影响其他.vue组件样式，而不是scoped使得.vue组件样式不受外样式影响。

1、在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。但是要慎用，因为在我们需要修改公共组件（第三方库或者项目中定制的组件）的样式的时候，scoped会造成很多困难，组要增加额外的复杂度。

一、创建公共组件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)来私有化样式。

二、在 " 不使用 " 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]定义的样式）， 如果此时仍需修改样式，则鼻血加重我们需要修改的样式的权重。

三、在 " 使用 " 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>





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。