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

更新时间：2018年05月28日 11:46:59 作者：Miss_Ye

本篇文章主要介绍了.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>

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

您可能感兴趣的文章:

vue中transition组件在项目中运用小结
这篇文章主要介绍了vue中transition组件在项目中运用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
vue spa应用中的路由缓存问题与解决方案
这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue.js上传图片到阿里云OSS存储的方法示例
这篇文章主要介绍了Vue.js上传图片到阿里云OSS存储的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
用npm安装vue和vue-cli,并使用webpack创建项目的方法
今天小编就为大家分享一篇用npm安装vue和vue-cli,并使用webpack创建项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue和uniapp页面实现自动滚动到最底部
这篇文章主要介绍了vue和uniapp页面实现自动滚动到最底部方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
vue封装第三方插件并发布到npm的方法
本篇文章主要介绍了vue封装第三方插件并发布到npm的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
拿来即用的vue旋转木马组件demo
这篇文章主要为大家介绍了拿来即用的vue旋转木马组件demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
Vue router动态路由实现过程
Vue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下
2023-03-03
Vue3 组件库的环境配置搭建过程
这篇文章主要介绍了Vue3 组件库的环境配置搭建过程,使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理，需要的朋友可以参考下
2023-03-03
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
这篇文章主要介绍了Vue使用vux-ui自定义表单验证遇到的问题及解决方法,需要的朋友可以参考下
2018-05-05