.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 cli+mui 区域滚动的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill详细教程
富文本编辑器在任何项目中都会用到,下面这篇文章主要给大家介绍了关于vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
最近在使用vite生成项目,这篇文章主要给大家介绍了关于vue3+vite中开发环境与生产环境全局变量配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
Vue3+Vite中不支持require的方式引入本地图片的解决方案
这篇文章主要介绍了Vue3+Vite中不支持require的方式引入本地图片的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了Vue组件内部实现一个双向数据绑定的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue过滤器用法,结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项,需要的朋友可以参考下2019-03-03
Vue中的Object.defineProperty是一个比较重要的方法,它是可以定义对象中属性的一个方法,相比于在对象中直接定义的对象,它更具有灵活性,本文将通过代码示例给大家简单介绍一下Vue中的Object.defineProperty,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了分享一个vue项目“脚手架”项目的实现步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了vue cli升级webapck4的步骤以及需要注意的地方，大家可以跟着操作学习下。2018-04-04
今天小编就为大家分享一篇vue 中滚动条始终定位在底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论